element 使用过程中遇到的问题及解决方法

记录一些使用element框架的疑问与坑

使用版本：2.12.0

1.element 表格某项格式化formatter【疑惑】

这里有个问题：当鼠标移动到表格上时，会再次触发formatter，而这个是没有必要的，我们只需格式化一次，但不知道它这么做的原因是啥。span-method 配置也是这种问题

2.element-ui表格合并span-method

表格合并这块需要自己写合并规则，有一点复杂。这个需要我们先弄懂规则，然后再定义规则

3.表单验证规则

当规则 rules 绑定在 el-form 元素上时，prop 值必须与 v-model 变量名相同，这就导致你需要给每个 item 配置规则...

还有一点要注意的是，当我们在写完表单验证规则的时候，发现在页面中没有生效，一度怀疑是自己规则写错了或写法不对，但当我们刷新浏览器后又ok了...所以，在写完表单验证规则后，建议刷新浏览器后再测试【注意点】。

注意：在写表单的自定义验证方法时，一定要保证调用 callback 回调方法，否则会出现点击表单提交没反应的情况。

4.table排序，操作按钮与数据不对应 [坑]

当我们点击编辑时，操作的数据并不是我们看到的当前数据，而是排序前的数据项。造成这个的原因是 scope 值

正确的写法是 props 值

这样，问题就解决了，不过在文档中是没有这样的demo和介绍的，一切全靠蒙...kao

关于 scope 与 props的介绍我也没看到，这里推荐一篇文章：理解vue之element-ui中的 slot-scope(很详细)

5.表格滚动条优化问题

当有固定列时，滚动条难以优化

我们发现操作列有间距，偏移量是框架自动写在element.style上，修改只能 !important 覆盖。但这样写会产生新的问题

这里就要我们判断何时出现滚动条，当滚动条出现时才添加 !important 样式覆盖偏移量。

这里不建议优化，因为要考虑非webkit内核的浏览器滚动条样式不生效的情况

相关文章推荐：通过 JS 判断页面是否有滚动条的简单方法

6.如何默认高亮第一条 table 数据

主要方法 setCurrentRow，其他相关设置看文档...

if (this.tableData.length > 0) {
    this.$refs['table'].setCurrentRow(this.tableData[0])
}

如果上述代码是在初始化页面初始化阶段执行的，比如mounted中，当我们快速切换页面时，可能this.$refs['table']为undefined，导致调用setCurrentRow报错。这时我们可以这么写

if (this.tableData.length > 0) {
    this.$refs['table']?.setCurrentRow(this.tableData[0]) // ?. 先判断this.$refs['table']是否存在
}

当然，有人说用 $nextTick ，我试了，没有效果......如果你非要默认选中第一行呢？那咋办？剑走偏锋，使用 setTimeout ?

7.添加统一样式的滚动条

element 有自定义滚动条，我们只需用以下代码把需要滚动的部分包裹起来即可

<el-scrollbar style="height:100%"></el-scrollbar>

如果要禁用 x 方向上的滚动条，需要添加全局样式

body .el-scrollbar__wrap {
    overflow-x: hidden;
}

上述代码我们常用于侧边栏

<el-aside class="aside">
    <el-scrollbar style="height:100%">
        <!-- 其他代码 -->
    </el-scrollbar>
</el-aside>

8.表格滚动报错

当我们的鼠标落在红色框区域进行滚动时，谷歌浏览器控制台会报错，同时，在这个区域滚动给人的感觉有些卡顿，而且会影响外侧滚动条的滚动，但主要功能并不受影响

控制台错误：

错误代码：

原因及解决方法参考：

https://blog.csdn.net/weixin_40716786/article/details/90675200

https://www.cnblogs.com/jack123/p/11505419.html

9.Select 选择器的弹框不跟随滚动条一起移动

可以发现，弹框并没有随表单项一起移动。element官网文档的Select中，给出了一个解决方法：

这样确实能解决问题，但更好的解决方法是找出造成此问题的原因。

经过调试发现，造成这个问题的原因是为form表单元素加入了overflow-y:auto。只要去掉这个样式即能解决问题。

10.Dialog弹框遇到的Bug

Bug1：

在测试IE时，发现我的项目Dialog会出现以下两个问题

（1）在 Dialog 出现时 body 滚动没有锁定

（2）遮罩覆盖了内容，出现在了内容上方【严重】

这两个问题均在IE下会出现，问题（2）可能是我的项目问题，当然我也怀疑是不是因为Dialog DOM节点较深（12层）导致IE渲染出错？但这两个问题最终都解决了，方法如下：

只需将这个属性设置为true即可。

Bug2:

这个属性不生效，不知是不是我写得有问题...

11.Upload组件之before-upload遇到的问题

这个是官网的介绍，但如果代码中涉及到异步就不能用return false的形式来结束上传了，比如我的代码：

上述代码中，不管 isOk 和 isLt10M 取何值都会上传文件，这就需要我们改写，使用 Promise

这样，我们就能正确的执行验证逻辑了

12.NavMenu组件重复点击导致Vue-Router报错

错误如下：

解决方法：捕获错误

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

13.table组件使用sortable指令以后,如何获取排序后的数据

table组件使用sortable指令以后，界面中的数据顺序和实际绑定变量中的顺序并不同步。通过this.$refs['table的ref'].tableData属性可以拿到排序后的数据

14.Transfer组件样式被Button组件样式覆盖的问题【严重】

我们在按需引入时，是不需要进行 import 'element-ui/lib/theme-chalk/index.css' 引入样式的。但存在以下问题

问题一：Button组件样式覆盖Transfer组件样式

这里有个隐藏bug，Transfer需在Button之前use

Vue.use(Transfer)
Vue.use(Button)

若Transfer在Button之后，则会出现Button样式覆盖Transfer

问题二：Cascader 级联选择器样式被 Scrollbar 滚动条组件样式覆盖

Cascader 的样式

.el-cascader-menu__wrap {
  height: 204px;
}

Scrollbar 的样式

.el-scrollbar__wrap {
    overflow: scroll;
    height: 100%;
}

覆盖导致Cascader 级联选择器高度100%。

解决方法：重写.el-cascader-menu__wrap样式，提高其优先级。

15.Select 选择器，Cascader 级联选择器在 Edge 中造成网页卡死【严重】

目前还没解决方法，详情可看：https://github.com/ElemeFE/element/issues/18162

16.Table 与 Tabs 组件一起使用带来的 bug

当 table 设置固定列时，进行 tabs 切换，会出现高度不正确的现象。

解决方法，给 table 设置一个 max-height 值。

17.Table 固定列下出现线条

找到该线条样式：

.el-table__fixed-right::before, .el-table__fixed::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #EBEEF5;
    z-index: 4;
}

解决方法：使 background-color 无效，这里我设置为 transparent。但去掉后会有新的问题产生，效果如下

当数据量多出现滚动条时，就缺少了这条线。所以，最好还是不要去掉......这算是一个小bug吧

18.表单验证报 is not a string 错误

原因是给 rule 定义了一个空对象

rules: {
  username: {}
}

解决方法，可以将 username 弄成空数组 []，也可以设置为非必须

rules: {
  username: { required: false }
}