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中即可

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"