el-table 的列前后部分是固定的中间的是循环出来的有时会出现列的内容对不上的问题

前端小蜜蜂w

于 2023-11-29 16:11:22 发布

阅读量535

点赞数 6

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/m0_61840359/article/details/134692437

版权

文章讨论了一个需求，如何在Vue组件El-Table中实现动态列显示配置。使用`key`属性解决了列错位问题，但遇到自定义列无法实时更新的问题。解决方案是移除循环列的`key`属性以确保视图更新及时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个问题的是我有一个需求是现在这个列表的列显示是可以配置的，除了前后的那几个固定的中间的显示都是可以自定义选择展示的，自定义选择需要展示的列之后出来就会出现一个问题后面固定的展示列会展示在配置的展示列的最后一列

然后呢我们就想了一种解决办法给所有的 el-table-column 都加上 key

 <el-table-column
      prop="id"
      key="id"
      width="90px"
      label="id">
 </el-table-column>

这样写之后呢，错位显示的问题倒是没有了但是出现了新的问题：自定义的列不能及时的更新到视图上（就是还是上一次设置的显示列在显示）然后我就把循环的列的 key 去掉就好啦

el-table 的列前后部分是固定的中间的是循环出来的 有时会出现列的内容对不上的问题