【element ui】问题集锦

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战

1、菜单路由跳转

要实现路由跳转，先要在el-menu标签上添加router属性。

而后只要在每一个el-menu-item标签内的index属性设置一下url便可实现点击el-menu-item实现路由跳转。

固然也能够在每一个el-menu-item标签内的router属性设置一下url便可实现点击跳转切优先级较index高。

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

• 配置：<el-menu unique-opened = true>
• 报错：Invalid prop: type check failed for prop "uniqueOpened". Expected Boolean, got String.
• 改成：<el-menu :unique-opened = true> 或 <el-menu :unique-opened = "true">

3、修改element-ui样式

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

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

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

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

此处注意：

• 一、修改样式时经过全局变量控制，会明显出现卡顿现象，最后仍是选择经过jequery的.css或者.animate方法。
• 二、setTimeout比setInterval对内存影响更友好。
• 三、正经说说怎么经过正规渠道修改element-ui样式：官网API文档没有那就只能看源码。

好比修改el-aside的宽度，找到文件\node_modules\element-ui\packages\aside\index啥也没有，引入了Aside from './src/main';

继续查看文件./src/main

<aside class="el-aside" :style="{ width }">
  <slot></slot>
</aside>
复制代码

以上能够看出el-aside能够设置修改宽度经过

props: {
  width: {
    type: String,
    default: '300px'
  }
}
复制代码

属性width默认300px，由此能够按照源码样式修改，注意当前值的类型是String，因此设置以下： <el-aside :width="'210px'"> 210px必定要用单引号''括起来转换成String类型。

4、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的高宽，然而具体的限制，参考以下博文，我试了下仍是不对，暂时找不到其余资料。

www.cnblogs.com/zhangdongya…

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

5、element标签el-select失效

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

<el-select v-model="validTime" clearable placeholder="请选择">
    <el-option v-for="item in validTimeData" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
复制代码

validTimeData = [{"label":"20分钟","value":"20"},{"label":"5分钟","value":"5"}] 

当validTime = "20"时，显示正常20分钟，

当validTime = 20时，显示异常，由于找不到20对应的label，因此显示20。

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

<el-form :model="deviceBox" :rules="rules" ref="deviceBox">
<el-form-item label="设备名称" prop="name">
    <el-input v-model="deviceBox.name"></el-input>
</el-form-item>
rules: {
    name: [
        {required: true, message: '请输入设备名称', trigger: 'blur'},
        {min: 3, max: 25, message: '长度在 3 到 25 个字符'}
    ]
}
复制代码

• 一、的model、rules、ref属性必不可少
• 二、的prop属性值与v-model的属性值必须保持一致
• 三、rules规则，详见github.com/yiminghe/as…

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

思考过程：

• 一、一层层给容器添加高宽100%，没用，同时发现.el-tabs__content无法加宽度100%；
• 二、发现.el-tabs加上border: 1px solid green;后就正常了，很怪；
• 三、与此同时发现echarts内层的div确实获取不到高度，但能正常获取宽度；
• 四、给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" 属性进行规定。

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

一般使用el-tree以下：

<el-tree ref="tree" :default-expanded-keys="[defaultId]"></el-tree>
但项目里，将其嵌入组件中这么用时：
<el-dialog :visible.sync="deptVisible" append-to-body>
    <my-tree>
        <el-tree ref="tree" :default-expanded-keys="[defaultId]"></el-tree>
    </my-tree>
</el-dialog>
复制代码

有个问题：

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

尝试修改：

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

this.$refs.tree.setCheckedKeys([defaultId])
this.$refs.tree.setCurrentKey(defaultId)
复制代码

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

百度发现：

segmentfault.com/q/101000001…

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

因而思考：

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

了解到VUE的生命周期：

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

须要注意的是，查看源码能够发现element组件的dialog方法用的v-show，只是隐藏了对话框部分，因此即使关闭了对话框，里面的组件并无销毁。

那么我能够在dialog隐藏的时候，经过v-if使得tree销毁啊啊！！！

以下设置便可：

<el-dialog :visible.sync="deptVisible" append-to-body>
    <my-tree v-if="deptVisible"></my-tree>
</el-dialog>
复制代码

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

官方文档有以下几个属性（Table-column Attributes）：

resizable：对应列是否能够经过拖动改变宽度（须要在el-table上设置border属性为真）

show-overflow-tooltip：当内容过长被隐藏时显示tooltip

注意：

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

例如：

<el-table element-loading-text="拼命加载中..." ref="table" :data="tableData" highlight-current-row :border="true">
    <el-table-column v-for="column in columns" :key="column.id" :property="column.prop" :label="column.name" :resizable="true" show-overflow-tooltip>
    </el-table-column>
</el-table>
复制代码

10、清除浮动很重要

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

<el-form label-width="80px" size="mini">
    <div class="info-left">
      <el-form-item label="设备ID:"><el-input v-model="devInfo.info.id"></el-input></el-form-item>
    </div>
    <div class="info-right">
      <el-form-item label="设备类型:"><el-input v-model="devInfo.info.dtype"></el-input></el-form-item>
    </div>
    <el-form-item label="备注:">
      <el-input type="textarea" v-model="devInfo.info.remarks"></el-input>
    </el-form-item>
</el-form>

.el-form .info-left {
  width: 49%;
  float: left;
}
.el-form .info-right {
  width: 49%;
  float: right;
}
复制代码

而后发现，除了最下面的备注能够正常输入操做，上面两栏无法正常输入使用。 为何呢？不知道啊，好奇怪哦。 忽然意识到上面左右两栏没有清除浮动啊，清除了一下结果果真好了啊。

<el-form label-width="80px" size="mini">
    <div class="info-left">
      <el-form-item label="设备ID:"><el-input v-model="devInfo.info.id"></el-input></el-form-item>
    </div>
    <div class="info-right">
      <el-form-item label="设备类型:"><el-input v-model="devInfo.info.dtype"></el-input></el-form-item>
    </div>
    <div style="clear:both"></div>
    <el-form-item label="备注 :">
      <el-input type="textarea" v-model="devInfo.info.remarks"></el-input>
    </el-form-item>
</el-form>
复制代码

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

另外：

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

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