[Bug Report] 动态table-column，数据改变不会更新表头的内容

[pengxueshan]

Element UI version

2.14.1

OS/Browsers version

macos/chrome 86.0.4240.198

Vue version

2.6.11

Reproduction Link

https://codepen.io/mountainp/pen/eYzXaMo

Steps to reproduce

data() { return { columns: [{label: '1'}, {label: '2'}] }; }

mounted() { setTimeout(() => { this.columns = [{label: '11'}, {label: '22'}]; }, 5000); }

What is Expected?

表头的内容应该更新为11，22

What is actually happening?

表头内容未进行更新

[pengxueshan]

<template>
  <el-table>
    <el-table-column
      v-for="(c, index) in columns"
      :key="index"
      :label="c.label"
    >
      <template #header>{{ c.label }}</template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [{label: '1'}, {label: '2'}]
    };
  },
  mounted() {
    setTimeout(() => {
      this.columns = [{label: '11'}, {label: '22'}];
    }, 5000);
  }
}
</script>

[9-lives]

key 依然是 1、2，没有触发更新。

[geekLeopoldFitz]

遇到了同样的问题，请问您那边解决了吗？

[geekLeopoldFitz]

大家遇到同样的问题可以看下是否添加了自定义表头渲染，这也可能导致动态表头不更新的问题，具体原因应该要看下源码怎么实现的

[pengxueshan]

遇到了同样的问题，请问您那边解决了吗？

没有

[geekLeopoldFitz]

遇到了同样的问题，请问您那边解决了吗？

没有

我这边已经解决了，是使用了自定义表头的问题，已经贴到上边了

[jijingsong]

遇到了同样的问题，请问您那边解决了吗？

没有

我这边已经解决了，是使用了自定义表头的问题，已经贴到上边了

如果使用了自定义表头应该怎么解决呢？

[jijingsong]

用jsx写的怎么搞

[Anchorll]

在header具名插槽那边 添加slot-scope=“scope”

[a1285771357]

有啥办法解决么

[OneMoreJack]

上面一个同学已经提到了，你这个明显是数据更新后key还是1，2的问题，不要用 index作 key, 换成label就行

<template>
  <el-table>
    <el-table-column
      v-for="(c, index) in columns"
      :key="c.label"
      :label="c.label"
    >
      <template #header>{{ c.label }}</template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [{label: '1'}, {label: '2'}]
    };
  },
  mounted() {
    setTimeout(() => {
      this.columns = [{label: '11'}, {label: '22'}];
    }, 5000);
  }
}
</script>

[OneMoreJack]

上面一个同学已经提到了，你这个明显是数据更新后key还是1，2的问题，不要用 index作 key, 换成label就行

<template>
  <el-table>
    <el-table-column
      v-for="(c, index) in columns"
      :key="c.label"
      :label="c.label"
    >
      <template #header>{{ c.label }}</template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [{label: '1'}, {label: '2'}]
    };
  },
  mounted() {
    setTimeout(() => {
      this.columns = [{label: '11'}, {label: '22'}];
    }, 5000);
  }
}
</script>

[HenseyVenom]

<template #header="{column}">{{ column.label }}

[ma-lihui]

在header具名插槽那边 添加slot-scope=“scope”

这样确实可以，但这也太奇怪了。其他地方的slot都可以正常更新，就table的slot="header"里有问题