ElementUI的bug/方案/使用技巧合集，持续更新（最新22-11-1)_element ui 漏洞

ELementUI bug/方案/使用技巧合集

ElementUI的bug/方案/使用技巧合集，会一直更新在这篇文章后面，建议关注或者收藏，方便下次阅读。

1. elementUi里面的el-input框无法输入删除的问题

原因：视图没有更新
发现elementUI中@input事件可以拿到当前输入的值
解决方法：this.$forceUpdate()强制更新

    <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" @input="change($event)"></el-input>
        </el-form-item>
1
2
3

 change(e){
        this.$forceUpdate()
      }
1
2
3

参考https://www.jianshu.com/p/28f39e72a2d7

2.下拉菜单el-dropdown修改样式无效

我把el-dropdown写在header.vue组件的局部样式中，但是并不起效且控制台中也没有显示自定义的pcss

/deep/ .el-dropdown-menu__item:focus,
/deep/ .el-dropdown-menu__item:hover,
 /deep/.el-dropdown-menu__item:not(.is-disabled):hover{
  background-color: rgba(254, 222, 9, 0.2)!important;

}
1
2
3
4
5
6

看控制台的html代码可以知道，el-dropdown并不在header组件里面，反而在body里面

只要把样式写在App.vue中即可或者给el-select加:popper-append-to-body="false"

3.给el组件添加点击事件无效

在vue中，给组件直接加@click是没有效果的，elementUI也算是组件，要使用@click.native

4. el-select el-dropdown el-cascader 下拉项 不随页面滚动问题

滚动页面时，下拉框总是会随着页面滚动条变化而发生改变，或者滚动页面时下拉框就会覆盖在上面层级较高，这样用户体验就非常不好，所以就需要固定
解决方法

• el-select 添 加 :popper-append-to-body="false"

popper-append-to-body: 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false
• el-cascader / el-dropdown-menu 添 加 :append-to-body="false"
  
  

5.折叠面板内容无法自动换行

给对应内容的div加上word-break: break-word;

6. el-table数值各种不准解决方法，如checkbox选中错误

问题：在el-table某列中我自定义模板el-checkbox，根据后端传过来的值，null为不选，有值即选中，但是打印数值判断明明没问题，选中状态却与预期不符合，查询了一些资料，发现是key的问题，没有唯一的key，渲染或者判断会有bug

<el-table-column label="选择" align="center">
     <template slot-scope="scope">
         <el-checkbox
			:checked="scope.row.goodsid != null"
        	@change="changeCheck(scope.row)"
             :disabled="!isEdit">选择</el-checkbox>
     </template>
 </el-table-column>
1
2
3
4
5
6
7
8

解决方法：el-table加上:row-key，用来优化 Table 的渲染

<el-table  :data="tableData" 
	:row-key="getRowKeys">
	...		
</el-table>
1
2
3
4

getRowKeys(row) {
	return row.id;//数据中任何唯一的值都可以
}
1
2
3