vue+element-ui中的el-table-column配合v-if导致列样式与位置错乱的现象

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

转载自：https://blog.csdn.net/tian_xuewu/article/details/97289316

描述：

根据需求，对el-table的某一列进行判断显隐时，经常会出现列的位置错乱和表头的样式变化的问题；
注：此问题不属于技术问题，可以再多看看框架文档；
ex:（会错乱的写法）
<el-table-column v-if="type === '0' ">姓名</el-table-column>
<el-table-column v-if="type === '1' ">年龄</el-table-column>

修改：

<el-table-column v-if="type === '0' " key='1' >姓名</el-table-column>
<el-table-column v-if="type === '1' " key='2' >年龄</el-table-column>
或
<el-table-column v-if="type === '0' " : key="Math.random()">姓名</el-table-column>
<el-table-column v-if="type === '1' " : key="Math.random()">年龄</el-table-column>

说明：

给使用了v-if的列，加一个固定的key值，或循环渲染key即可；
虽然仍会有一瞬间的表头的样式的改变和列的错乱，但是已经不影响数据的展示了；

以上是 vue+element-ui中的el-table-column配合v-if导致列样式与位置错乱的现象 的全部内容， 来源链接： utcz.com/z/378995.html

回到顶部