elementui的table组件,大量使用v-if导致列表渲染错乱,有的列渲染的值不对,有的列渲染出来的空值解决办法

记录一下:

这是同事碰上的,感觉挺奇怪的就研究了研究。

先说一下,之所以是同事那边碰到的而我这边碰不到这个问题,是因为我这边做 el-table-column 的时候,是先定义的 tableHeader: [...] 然后通过 v-for 遍历出来的,vue 开发的都知道,v-for 的时候都会绑定 :key="" ,他这里是平铺出来的

举例代码(非真实代码):

<el-table
  :data="tableData"
  style="width: 100%"
  max-height="250">
  <el-table-column
  	v-if="a == 1"
    fixed
    prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column
  	v-else
    prop="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 2"
    prop="province"
    label="省份"
    width="120">
  </el-table-column>
  <el-table-column
  	v-else
    prop="city"
    label="市区"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 3"
    prop="address"
    label="地址"
    width="300">
  </el-table-column>
  <el-table-column
  	v-else
    prop="zip"
    label="邮编"
    width="120">
  </el-table-column>
  <el-table-column
    fixed="right"
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button
        @click.native.prevent="deleteRow(scope.$index, tableData)"
        type="text"
        size="small">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>

解决办法

这是平铺出来的,从这里可以看到到处都是 v-ifv-else,其实这个问题解决起来也超级简单,平铺出来的也加上 key 关键词就好啦,只需要给 需要判断el-table-column 加上 key 即可,可以自己排列,也可以直接 :key="Math.random()"

<el-table
  :data="tableData"
  style="width: 100%"
  max-height="250">
  <el-table-column
  	v-if="a == 1"
  	:key="Math.random()"
    fixed
    prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column
  	v-else
  	:key="Math.random()"
    prop="name"
    label="姓名"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 2"
  	:key="Math.random()"
    prop="province"
    label="省份"
    width="120">
  </el-table-column>
  <el-table-column
  	v-else
  	:key="Math.random()"
    prop="city"
    label="市区"
    width="120">
  </el-table-column>
  <el-table-column
  	v-if="a == 3"
  	:key="Math.random()"
    prop="address"
    label="地址"
    width="300">
  </el-table-column>
  <el-table-column
  	v-else
  	:key="Math.random()"
    prop="zip"
    label="邮编"
    width="120">
  </el-table-column>
  <el-table-column
    fixed="right"
    label="操作"
    width="120">
    <template slot-scope="scope">
      <el-button
        @click.native.prevent="deleteRow(scope.$index, tableData)"
        type="text"
        size="small">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>

下方是我这边的渲染 table 方式,碰不到这种问题都…
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_38652871/article/details/130085184