element-plus 2.2.30 table 如何动态列渲染

在 element-plus 的 Table 组件中，可以使用 `columns` 属性来指定表格的列，而且这个属性也是支持动态更新的。下面是一个简单的示例代码：

<template>
  <el-table :data="tableData" :columns="columns"></el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
        { name: 'Bob', age: 40 }
      ],
      columns: [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' }
      ]
    }
  },
  methods: {
    // 在某个事件的回调函数中动态更新 columns 属性
    updateColumns() {
      this.columns = [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        { prop: 'gender', label: 'Gender' } // 新增一列
      ]
    }
  }
}
</script>

这里的 `columns` 数组中的每个元素都是一个对象，用来描述一列的属性。其中 `prop` 属性表示该列对应数据项的字段名，`label` 属性表示该列的表头名称。如果要新增或删除一列，只需要在 `columns` 数组中添加或删除相应的对象即可。注意，由于 `columns` 是一个响应式属性，Vue 会自动在数据更新时重新渲染表格。