记录一些使用element框架的疑问与坑
使用版本:2.12.0
这里有个问题:当鼠标移动到表格上时,会再次触发formatter,而这个是没有必要的,我们只需格式化一次,但不知道它这么做的原因是啥。span-method 配置也是这种问题
表格合并这块需要自己写合并规则,有一点复杂。这个需要我们先弄懂规则,然后再定义规则
当规则 rules 绑定在 el-form 元素上时,prop 值必须与 v-model 变量名相同,这就导致你需要给每个 item 配置规则...
还有一点要注意的是,当我们在写完表单验证规则的时候,发现在页面中没有生效,一度怀疑是自己规则写错了或写法不对,但当我们刷新浏览器后又ok了...所以,在写完表单验证规则后,建议刷新浏览器后再测试【注意点】。
注意:在写表单的自定义验证方法时,一定要保证调用 callback 回调方法,否则会出现点击表单提交没反应的情况。
当我们点击编辑时,操作的数据并不是我们看到的当前数据,而是排序前的数据项。造成这个的原因是 scope 值
正确的写法是 props 值
这样,问题就解决了,不过在文档中是没有这样的demo和介绍的,一切全靠蒙...kao
关于 scope 与 props的介绍我也没看到,这里推荐一篇文章:理解vue之element-ui中的 slot-scope(很详细)
当有固定列时,滚动条难以优化
我们发现操作列有间距,偏移量是框架自动写在element.style上,修改只能 !important 覆盖。但这样写会产生新的问题
这里就要我们判断何时出现滚动条,当滚动条出现时才添加 !important 样式覆盖偏移量。
这里不建议优化,因为要考虑非webkit内核的浏览器滚动条样式不生效的情况
相关文章推荐:通过 JS 判断页面是否有滚动条的简单方法
主要方法 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 ?
element 有自定义滚动条,我们只需用以下代码把需要滚动的部分包裹起来即可
如果要禁用 x 方向上的滚动条,需要添加全局样式
body .el-scrollbar__wrap {
overflow-x: hidden;
}
上述代码我们常用于侧边栏
当我们的鼠标落在红色框区域进行滚动时,谷歌浏览器控制台会报错,同时,在这个区域滚动给人的感觉有些卡顿,而且会影响外侧滚动条的滚动,但主要功能并不受影响
控制台错误:
错误代码:
原因及解决方法参考:
https://blog.csdn.net/weixin_40716786/article/details/90675200
https://www.cnblogs.com/jack123/p/11505419.html
可以发现,弹框并没有随表单项一起移动。element官网文档的Select中,给出了一个解决方法:
这样确实能解决问题,但更好的解决方法是找出造成此问题的原因。
经过调试发现,造成这个问题的原因是为form表单元素加入了overflow-y:auto。只要去掉这个样式即能解决问题。
在测试IE时,发现我的项目Dialog会出现以下两个问题
(1)在 Dialog 出现时 body 滚动没有锁定
(2)遮罩覆盖了内容,出现在了内容上方【严重】
这两个问题均在IE下会出现,问题(2)可能是我的项目问题,当然我也怀疑是不是因为Dialog DOM节点较深(12层)导致IE渲染出错?但这两个问题最终都解决了,方法如下:
只需将这个属性设置为true即可。
这个属性不生效,不知是不是我写得有问题...
这个是官网的介绍,但如果代码中涉及到异步就不能用return false的形式来结束上传了,比如我的代码:
上述代码中,不管 isOk 和 isLt10M 取何值都会上传文件,这就需要我们改写,使用 Promise
这样,我们就能正确的执行验证逻辑了
错误如下:
解决方法:捕获错误
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
table组件使用sortable指令以后,界面中的数据顺序和实际绑定变量中的顺序并不同步。通过this.$refs['table的ref'].tableData属性可以拿到排序后的数据
我们在按需引入时,是不需要进行 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样式,提高其优先级。
目前还没解决方法,详情可看:https://github.com/ElemeFE/element/issues/18162
当 table 设置固定列时,进行 tabs 切换,会出现高度不正确的现象。
解决方法,给 table 设置一个 max-height 值。
找到该线条样式:
.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吧
原因是给 rule 定义了一个空对象
rules: {
username: {}
}
解决方法,可以将 username 弄成空数组 [],也可以设置为非必须
rules: {
username: { required: false }
}