element使⽤过程中遇到的问题及解决⽅法
记录⼀些使⽤element框架的疑问与坑
使⽤版本：2.12.0
1.element 表格某项格式化formatter【疑惑】
这⾥有个问题：当⿏标移动到表格上时，会再次触发formatter，⽽这个是没有必要的，我们只需格式化⼀次，但不知道它这么做的原因是啥。 配置也是这种问题
2.
表格合并这块需要⾃⼰写合并规则，有⼀点复杂。这个需要我们先弄懂规则，然后再定义规则
3.表单验证规则
当规则 rules 绑定在 el-form 元素上时，prop 值必须与 v-model 变量名相同，这就导致你需要给每个 item 配置规则...
还有⼀点要注意的是，当我们在写完表单验证规则的时候，发现在页⾯中没有⽣效，⼀度怀疑是⾃⼰规
则写错了或写法不对，但当我们刷新浏览器后⼜ok了...所以，在写完表单验证规则后，建议刷新浏览器后再测试【注意点】。
注意：在写表单的⾃定义验证⽅法时，⼀定要保证调⽤ callback 回调⽅法，否则会出现点击表单提交没反应的情况。
5.表格滚动条优化问题
当有固定列时，滚动条难以优化
我们发现操作列有间距，偏移量是框架⾃动写在element.style上，修改只能  !important 覆盖。但这样
写会产⽣新的问题
这⾥就要我们判断何时出现滚动条，当滚动条出现时才添加 !important 样式覆盖偏移量。
这⾥不建议优化，因为要考虑⾮webkit内核的浏览器滚动条样式不⽣效的情况
相关⽂章推荐：
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 ></el-scrollbar>
如果要禁⽤ x ⽅向上的滚动条，需要添加全局样式
body .el-scrollbar__wrap {
overflow-x: hidden;
}
上述代码我们常⽤于侧边栏
<el-aside class="aside">
<el-scrollbar >
<!-- 其他代码 -->
</el-scrollbar>
</el-aside>
8.表格滚动报错
当我们的⿏标落在红⾊框区域进⾏滚动时，⾕歌浏览器控制台会报错，同时，在这个区域滚动给⼈的感觉有些卡顿，⽽且会影响外侧滚动条的滚动，但主要功能并不受影响
控制台错误：
错误代码：
原因及解决⽅法参考：
9.Select 选择器的弹框不跟随滚动条⼀起移动
可以发现，弹框并没有随表单项⼀起移动。element官⽹⽂档的Select中，给出了⼀个解决⽅法：
这样确实能解决问题，但更好的解决⽅法是出造成此问题的原因。
经过调试发现，造成这个问题的原因是为form表单元素加⼊了overflow-y:auto。只要去掉这个样式即能解决问题。
10.Dialog弹框遇到的Bug
Bug1：
在测试IE时，发现我的项⽬Dialog会出现以下两个问题
（1）在 Dialog 出现时 body 滚动没有锁定
（2）遮罩覆盖了内容，出现在了内容上⽅【严重】
这两个问题均在IE下会出现，问题（2）可能是我的项⽬问题，当然我也怀疑是不是因为Dialog DOM节点较深（12层）导致IE渲染出错？但这两个问题最终都解决了，⽅法如下：
element表格横向滚动条
只需将这个属性设置为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)
}
当然也可以选择进⾏判断，点击当前页⾯导航不进⾏跳转（即不调⽤ push ⽅法）。
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 的样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。