【element ui】问题集锦

前言

将以往文章的element ui问题汇总至此

一、菜单路由跳转

要实现路由跳转，先要在el-menu标签上添加router属性。
然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
当然也可以在每个el-menu-item标签内的router属性设置一下url即可实现点击跳转切优先级较index高。

二、是否只保持一个子菜单的展开配置时报错

• 配置：
• 报错：Invalid prop: type check failed for prop "uniqueOpened". Expected Boolean, got String.
• 改为： 或

三、修改element-ui样式

因为官方文档并不详细，像官方文档没有说el-aside的宽度怎么设置。

然后我发现，给el-aside的class里设置宽度不行，貌似会被元素样式覆盖掉，非得设置style=“width:210px”。

问题来了：我点击某个按钮，通过jequery或者全局变量控制修改el-aside的宽度。同时当我页面上有定时器不断刷新存在时，修改的宽度会恢复成style=“width:210px”。

目前解决的办法只有一个，修改element-ui元素样式，再通过jq修改元素el-aside的宽度时，无论定时器setTimeout怎么刷新也不会影响当前样式修改。

此处注意：

• 1、修改样式时通过全局变量控制，会明显出现卡顿现象，最后还是选择通过jequery的.css或者.animate方法。
• 2、setTimeout比setInterval对内存影响更友好。
• 3、正经说说怎么通过正规渠道修改element-ui样式：官网API文档没有那就只能看源码。
  比如修改el-aside的宽度，找到文件\node_modules\element-ui\packages\aside\index啥也没有，引入了Aside from ‘./src/main’;

继续查看文件./src/main

以上可以看出el-aside可以设置修改宽度通过

props: {
  width: {
    type: String,
    default: '300px'
  }
}

属性width默认300px，由此可以按照源码样式修改，注意当前值的类型是String，所以设置如下：

210px一定要用单引号’'括起来转换成String类型。

四、border-image导致el-table表头的边框时有时无

• 现象：el-table__header左右边框有时候不显示
• 区别：表头的高宽不一样
• 改：border-image: linear-gradient(150deg, #1ddae4 , #2698ec) 30 30;
• 为：border-image: linear-gradient(150deg, #1ddae4 , #2698ec) 5;
  就可以了……

原因：

border-image: linear-gradient()后面的四个参数分别表示top right bottom left

有一些高宽限制肯定不能超过外层div的高宽，然而具体的限制，参考如下博文，我试了下还是不对，暂时找不到其他资料。

https://www.cnblogs.com/zhangdongya/p/8677630.html

包括这四个参数设置 30 30px 1/30px的差别为什么中间那个不可以，另外两个分别显示的什么还是不清楚。哎。

五、element标签el-select失效

element标签使用时候千万注意string和number类型的对应一致，不然一直不生效，比如：

validTimeData = [{“label”:“20分钟”,“value”:“20”},{“label”:“5分钟”,“value”:“5”}]
当validTime = "20"时，显示正常20分钟，
当validTime = 20时，显示异常，因为找不到20对应的label，所以显示20。

六、element ui的表单rules验证问题

    

rules: {
    name: [
        {required: true, message: '请输入设备名称', trigger: 'blur'},
        {min: 3, max: 25, message: '长度在 3 到 25 个字符'}
    ]
}

• 1、的model、rules、ref属性必不可少
• 2、的prop属性值与v-model的属性值必须保持一致
• 3、rules规则，详见https://github.com/yiminghe/async-validator

七、火狐下，el-tab展示的echarts提示Dom has no width or height

思考过程：

• 1、一层层给容器添加高宽100%，没用，同时发现.el-tabs__content没法加宽度100%；
• 2、发现.el-tabs加上border: 1px solid green;后就正常了，很怪；
• 3、与此同时发现echarts内层的div确实获取不到高度，但能正常获取宽度；
• 4、给echarts层的div的class中，赋高度和宽度100%不行，600px也不行，只有在style上赋值600px可以，或者在class中赋值600px !important可以。

然后意识到100% !important是可以的，不过可能是真的100%只有这么高，但是一层层100%的高度为什么到此就没了高度呢。

刚刚不是有个.el-tabs__content没法加宽度吗，查看.el-tabs__content层：position: relative！

晕改为absolute就行了，但是插件原来的样式乱掉了得自己慢慢调整。

• fixed
• 生成绝对定位的元素，相对于浏览器窗口进行定位。
• 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• static
• 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• inherit
• 规定应该从父元素继承 position 属性的值。
• relative
• 生成相对定位的元素，相对于其正常位置进行定位。
• 因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
• absolute
• 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
• 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

八、element树中的default-expanded-keys一旦加载无法修改的问题

通常使用el-tree如下：

但项目里，将其嵌入组件中这么用时：

    
        
    

有个问题：

在弹出框中包含el-tree，初始化el-tree时，给默认展开赋值defaultId，弹出框关闭重新弹出即便defaultId改变了，el-tree的默认展开还是没变。

尝试修改：

defaultId改变时父组件调用子组件的设置选中值和当前高亮值的方法，如下

this.$refs.tree.setCheckedKeys([defaultId])
this.$refs.tree.setCurrentKey(defaultId)

发现当弹出框关闭后打开，defaultId变化后，确实选中和高亮变了，但是之前的展开项仍然展开！！

百度发现：

https://segmentfault.com/q/1010000014244957

这篇文章说到【tree和tree-store都没有提供收起节点的方法】。。。

于是思考：

遍历是不可能的，但是我可以让el-tree更新或者重新加载啊！

了解到VUE的生命周期：

updated是当data里的数据有变化时触发，而不是父组件传递过来的props，props是一次性的，所以updated无望。

需要注意的是，查看源码可以发现element组件的dialog方法用的v-show，只是隐藏了对话框部分，所以即便关闭了对话框，里面的组件并没有销毁。

那么我可以在dialog隐藏的时候，通过v-if使得tree销毁啊啊！！！

如下设置即可：

九、el-table表格宽度拖动功能

官方文档有如下几个属性（Table-column Attributes）：
resizable：对应列是否可以通过拖动改变宽度（需要在el-table上设置border属性为真）
show-overflow-tooltip：当内容过长被隐藏时显示tooltip

注意：

• 1、Table-column属性也就是说是设置在标签上的！！！
• 2、如需使用resizable的拖动改变宽度功能，必须在el-table上设置属性border为真，不是样式设置border，是属性！！！

例如：

十、清除浮动很重要

使用el-form布局时有个问题，如果想分两栏布局，左边一列右边一列，最下面还有合起来一个，像这样：

    

      
    
    

      
    
    
      
    


.el-form .info-left {
  width: 49%;
  float: left;
}
.el-form .info-right {
  width: 49%;
  float: right;
}

然后发现，除了最下面的备注可以正常输入操作，上面两栏没法正常输入使用。
为什么呢？不知道啊，好奇怪哦。
突然意识到上面左右两栏没有清除浮动啊，清除了一下结果果然好了啊。

结论：清除浮动真的很重要！！！

另外：
在使用el-tabs等组件时，火狐下也会出现高度显示异常，但凡DIV高宽异常时，按如下步骤排查：

• 1、确定用百分数异常，查看其外层div是否设置高宽。
• 2、查看是否存在浮动没有清除。
• 3、检查position的设置是否合理。

十一、this.$confirm闪退的问题


downloadDoc () {
      this.$confirm('是否需要下载帮助文档?', '下载', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(() => {
          this.helpDocDownload()
          this.$message({
            type: 'success',
            message: '下载成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下载'
          })
        })
    }

初次点击a标签时，弹出框会闪退，再次点击正常。

因为href="#"会定位到页面顶部，即出现，点击弹出框外部导致弹出框退出关闭的效果。

将标签改为如下即可：



十二、$message报错

报错代码：

Vue.prototype.$message.info(res.data.errorMessage)

报错信息：

TypeError: Cannot set property 'type' of undefined
    at Function.Message. [as info] (element-ui.common.js?ccbf:26452)
    at eval (index.js?16ca:126) "get请求出错！"

正确代码：

Vue.prototype.$message(
  {
    type: 'info',
    message: res.data.errorMessage
  }
)

十三、冒号绑定值的问题

在vue中绑定属性值时，比如

1、若title前不加冒号:

会被当做html文本处理成字符串，也就是title最终渲染出来是字符串"dialogTitle"

2、若title前加冒号:

会被当做模板处理，在渲染的时候会进行相应的填值处理。

所以

当dialogTitle处为数值、布尔值时，必须要在title前加上冒号，比如：

否则会被当成字符串true和字符串101。

十四、el-table固定最右的操作栏上下错行的问题

现象一：

在el-dialog弹出框中使用到el-table列表时，右侧操作栏设置了fixed=“right”，第一次打开弹框正常，关闭后再次打开，发现操作栏全都往下移动了一行，导致表格行错位。

解决

官方文档有提供方法doLayout，但没明确什么情况下使用，或许此时就能用。
监听data变化后，需要重新渲染el-table时，调用doLayout该方法即可。

代码

watch: {
  '$attrs.data': {
    handler (val) {
      this.$refs.comTable.doLayout() // 解决二次弹框时操作栏因为fixed错位
    }
  }
},

现象二：

打开F12，使宽度变窄，导致表头某列换行时，频繁切换F12，导致表格行错位。

解决

此时数据没有改变页面没有重新渲染，除非去监听窗口宽度变化。
但是只有在表头某列换行时，才会产生错位。
于是考虑设置表头列的最小宽度即可。

代码

{
  id: '3',
  label: '关联算法名称',
  prop: 'algoName',
  minWidth: '200'
},
{
  id: '2',
  label: '关联算法编号',
  prop: 'algoCode',
  minWidth: '200'
},

十五、el-form重置值错乱的问题

• 前提：el-dialog里面有el-form
• 问题：关闭el-dialog时，明明清除了form绑定的对象内容，但是再次打开弹窗还是带上了之前的值。
• 检查：
  检查代码发现，在关闭销毁弹窗时，调用了el-form的.resetFields()这个方法。
  查询resetFields()发现，很多人都遇到了同样的问题。
  也有人说加上nextTick解决，代码已有但貌似没用。
  注意这个方法是重置并不是清空，可能有点错乱，重置成了上一个编辑的值，我猜的。
  但是只要close弹窗时候，手动置空了form绑定的对象就行。
• 结论：尽量避免一下用resetFields()，注意和clearValidate()清除校验进行区分。

十六、el-date-picker切换type错乱

当dateType显示类型动态变换(year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange)时，出现样式错乱。
尝试给样式禁用动画效果：

.el-date-editor {
    transition: none !important;
}

没用。
尝试设置setTimeout，设置时长1s+确实可以，但是设置0或者使用nextTick都没用。
结果：赋个:key值即可！！！