el-table,el-table-column v-for循环时用v-if加key仍然错误的原因

最新推荐文章于 2023-07-19 15:36:00 发布

原创最新推荐文章于 2023-07-19 15:36:00 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui #html #vue #前端

问题经验总结专栏收录该内容

6 篇文章

订阅专栏

在Vue中使用el-table时，遇到加了唯一key但依然出现列错位的错误，通常是因为在el-table-column外有额外的嵌套标签。正确做法是避免额外嵌套，将v-for直接应用在el-table-column上，并通过计算属性处理数据。例如，可以将targetList遍历后的fieldList合并到一个新数组，并直接在el-table-column中遍历这个新数组，即使有v-if条件也不会导致错位。

有时候遇到加了唯一key仍然el-table错误，一般这种情况通常是在el-table-column外面嵌套了其他标签。

有时我们需要v-for循环一个数组，然后取每个值（object）中的一个属性（array）再去v-for el-table-column的时候，如果通过值控制el-table-column的v-if，尽管加了:key，但是仍然会出现列错位。比如

<template lang="pug">         
el-table(ref="leftTable"  :data="previewData")
    span(v-for='(chart,index1) in targetList' :key=`${targetChart}${index1}`)
        el-table-column(v-for='(field,index2) in chart.fieldList' v-if='field.isView'     
                       :label="field.fieldAlias" :key=`${index1}0${index2}`)
</template>

此时应该去掉span，然后在页面写

  computed: {
    targetFieldList() {
      let kkk = []
      this.targetList.forEach((chart) => {
        kkk = kkk.concat(chart.fieldList)
      })
      return kkk
    }
  },

然后el-table-column用targetFieldList遍历，加了v-if也不会错位了。