动态渲染el-table-column

动态渲染`el-table-column`在Element UI的表格组件中非常有用，它允许你在运行时根据数据的变化动态地生成表格列。在Vue.js中，你可以这样做：

1. 首先，在你的数据对象数组里定义一个列配置对象数组，这个数组会在每次更新时被渲染成新的列。例如：

data() {
  return {
    columns: [
      { prop: 'name', label: '姓名' },
      { prop: 'age', label: '年龄' }
    ],
    dynamicColumns: [] // 初始化动态列为空
  };
}

2. 然后，当需要动态添加、移除或修改列时，根据数据情况调整`dynamicColumns`。例如，你可以设置一个函数来处理这个逻辑：

methods: {
  handleDataChange(data) {
    this.dynamicColumns = data.map(item => ({
      property: item.field, // 使用数据字段作为列属性
      label: item.label || item.field, // 标签可以来自数据本身，如果没有则使用字段名
      // 添加其他自定义属性，如 formatter 函数进行格式化等
    }));
  }
}

3. 在表格组件初始化时，将静态列和动态列合并起来：

mounted() {
  this.handleDataChange(this.dataSource); // dataSource 是你的数据源
  this.columns.push(...this.dynamicColumns);
},
updated() {
  // 如果数据发生变化，再次调用 handleDataChange 更新列
}

4. 最后，在模板中使用`v-for`遍历`columns`数组来渲染表格：

<el-table :data="dataSource" :columns="columns"></el-table>