Vue.js 自定义el-table中的列标题不是响应式的

在本文中，我们将介绍Vue.js中如何自定义el-table中的列标题，并解决其不响应式的问题。

在Vue.js的el-table组件中，可以通过设置scopedSlots属性来自定义列标题。然而，当我们动态改变scopedSlots中的内容时，列标题不会自动更新。这是因为Vue.js中在编译时会对scopedSlots进行静态标记，从而导致其内容不具备响应式的特性。为了解决这个问题，我们可以使用Vue.js提供的Vue.$set方法手动触发响应式更新。

下面是一个示例，演示了如何自定义列标题并使其响应式更新：

<template>
  <el-table :data="tableData">
    <el-table-column :label=" $scopedSlots.header ?$ scopedSlots.header() : ''">
      <template slot-scope="scope">
        <span>{{scope.row.name}}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      this. $set(this.$ scopedSlots, 'header', () => 'Custom Header');
    }, 2000);
  },
};
</script>

在上面的示例中，我们首先定义了一个el-table组件，并将tableData绑定到data属性上。然后，我们在el-table-column组件里面使用了$scopedSlots.header()来动态显示列标题，默认为空字符串。

在mounted生命周期钩子函数中，我们使用了setTimeout来模拟一个异步操作，2秒后使用Vue.$set方法将scopedSlots中的header内容改为’Custom Header’。这样，当2秒钟过后，我们会发现列标题自动更新为’Custom Header’。

通过这种方式，我们解决了自定义列标题不响应式的问题，使其能够根据数据的变化而更新。

阅读更多：Vue.js 教程