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

业务需求

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

实现方法

将操作栏的<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进行代替。