美文网首页前端开发那些事儿
Element UI 表格内元素使用了 ' fixed ' 引发

Element UI 表格内元素使用了 ' fixed ' 引发

作者: WebDog369 | 来源:发表于2021-05-25 16:27 被阅读0次

业务需求

表格内部某条数据需要用户自己填,最后一栏有操作按钮,并且当窗口宽度不够时也需看到操作按钮。

实现方法

将操作栏的<el-table-column></ el-table-column >标签添加 fixed=" right "属性。

由于是动态表格,所以无法v-model,所以需要原生input,在input标签上绑定id为scop.row.uuid方便查找。

引发的问题

当窗口宽度不足,出现横向滚动条时候,浏览器打印台会报出现重复id的dom元素的警告    

原因及解决办法

element ui中的fixed悬浮其实是生成了两套一模一样的数据,当横向滚动条出现时会展示有悬浮的那一套,滚动条未出现时会展示无悬浮的那一套,而这两套是共同存在与页面中的,所以就会报重复id的dom元素的错误

这种情况是无法使用fixed的,所以需要去除fixed或者使用vue中的ref进行代替。

相关文章

网友评论

    本文标题:Element UI 表格内元素使用了 ' fixed ' 引发

    本文链接:https://www.haomeiwen.com/subject/ntkcsltx.html