element-ui table 列渲染错乱

最新推荐文章于 2024-05-14 10:27:09 发布

小志哥斯拉

最新推荐文章于 2024-05-14 10:27:09 发布

阅读量703

点赞数

分类专栏： Vue 文章标签： ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_55510188/article/details/130324890

版权

Vue 专栏收录该内容

24 篇文章

订阅专栏

当使用v-if控制多列表格并出现渲染问题时，可以通过给每一列添加唯一的key属性来解决。在表格列数量较多（如10列以上）且存在缓存场景（如keep-alive）时，添加key能确保正确渲染和切换。

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

问题案例如下：

通过v-if控制表格的列是否展示，每列通过showColumn函数检查用户的配置，返回true或false（是否显示该列）。

          <el-table-column
            v-if="showColumn('customerName')"
            prop="customerName"
            label="客户名称"
            width="120"
            sortable>
          </el-table-column>
          <el-table-column
            v-if="showColumn('description')"
            prop="description"
            label="描述"
            width="160"
            sortable>
          </el-table-column>

存在问题：

当table表格通过v-if配置是否显示列，且列的数量过多时（大概10列以上），就会出现渲染混乱。(例如：页面组件是缓存的keep-alive，首次渲染表格没问题。但是切换到其他组件再切换回来时，表格列就会出现错乱。)

解决方法：

每一列添加唯一key属性值，问题解决。

          <el-table-column
            key="customerName"
            v-if="showColumn('customerName')"
            prop="customerName"
            label="客户名称"
            width="120"
            sortable>
          </el-table-column>
          <el-table-column
            key="description"
            v-if="showColumn('description')"
            prop="description"
            label="描述"
            width="160"
            sortable>
          </el-table-column>