Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eayAJOoj-1600259160168)(C:\Users\22725\Desktop\对对对.gif)]

问题描述 如图所示

解决的方法也是自己在网上误打误撞找到了

首先是 给el-menu定义一个class样式

<el-aside width="initial" class="home_aside">
  	  <el-menu
            class="el-menu-vertical-demo"
            background-color="#718a7f"
            :router="true"
            :unique-opened="true"
            :collapse-transition="true"
            :collapse="isCollapse"
            active-text-color="#ffd04b"
          >
      </el-menu>
  </el-aside>

然后在样式中进行修改，我这里用的是scss

<style>
.el-menu-vertical-demo {
  height: 100vh;
  &:not(.el-menu--collapse) {
    width: 180px;
  }
}
</style>

这个样子就完美解决了问题，

element-UI 中beforeLeave用法

问题：切换tabs的每一项时 需要判断某些条件来进行判断是否跳转，例如：我在当前导航需要选中一个必须值才可以跳转到下一个页面 这个时候 按照正常的逻辑来写的话 tabs内容栏不会切换，但是tabs标签栏就进行切换了，需要用到beforeLeave来进行拦截，效果很好

这个是el-tabs中的一个属性绑定了一个方法

<el-tabs :before-leave='leaveTab'>
        <el-tab-pane label="主合同" name="False"></el-tab-pane>
        <el-tab-pane label="子合同" name="True"></el-tab-pane>
      </el-tabs>
      
    leaveTab(activeName, oldActiveName) {
    console.log(activeName,oldActiveName)//False True
    // do something
    },

echarts 无法获取属性“getAttribute”的值: 对象为 null 或未定义 错误解决方法

我在vue的项目中呢把echarts的方法放到了created中，到值拿不到DOM元素，所以就无法获取到getAttribute的值，解决方法就是把echarts的方法放到mounted中执行 或者是在created中利用this.$nexttick中执行

Vue Element-UI el-aside组件永远有一个300px的width

  1. 首先对全局的300px数值进行全局搜索，查看是不是因为代码某处设置了宽度，导致的问题。结果并没有发现可疑的设置。
  2. 检查代码是否正确作用，确定对aside-style的相关设置已经作用到了组件上，只是宽度被覆盖，手动去除覆盖的元素样式，组件正常运作。
  3. 直接查看组件源码，发现其接受一个width值，并使用元素样式设定这个值，若没有传width值，则默认指定width为300px，破案了。

组件中的源码如下，但是设定了默认的宽度，所以在没有指定宽度的时候，会按照默认的宽度进行设定，且优先级极高。

使用代码：

<el-aside id="aside-style" width="18%">
  ...
<el-aside>
123

指定宽度18%后，宽度按照指定样式显示