问题案例如下:
通过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>