elementiu-plus table 动态添加列

要在 element-ui 的表格中动态添加列，可以使用以下步骤：

1. 首先，在 data 中定义表格的列数据，例如：

data() {
  return {
    tableData: [
      { name: 'John', age: 23 },
      { name: 'Mary', age: 25 },
      { name: 'Bob', age: 30 }
    ],
    columns: [
      { label: 'Name', prop: 'name' },
      { label: 'Age', prop: 'age' }
    ]
  }
}

2. 在 template 中，使用 el-table 组件来渲染表格，并将 columns 数组中的列作为表格的列，例如：

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

3. 要动态添加列，可以使用 el-table-column 组件，并在需要添加列的时候，将新的列数据添加到 columns 数组中，例如：

<template>
  <el-button @click="addColumn">Add Column</el-button>
  <el-table :data="tableData" :columns="columns">
    <el-table-column v-for="(column, index) in dynamicColumns" :key="index" :label="column.label" :prop="column.prop"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 23 },
        { name: 'Mary', age: 25 },
        { name: 'Bob', age: 30 }
      ],
      columns: [
        { label: 'Name', prop: 'name' },
        { label: 'Age', prop: 'age' }
      ],
      dynamicColumns: []
    }
  },
  methods: {
    addColumn() {
      this.dynamicColumns.push({ label: 'New Column', prop: 'newColumn' })
    }
  }
}
</script>

在上面的示例中，我们添加了一个按钮，点击按钮时会调用 addColumn 方法，在该方法中将新的列数据添加到 dynamicColumns 数组中。然后，我们使用 v-for 指令遍历 dynamicColumns 数组，并使用 el-table-column 组件来渲染新的列。

注意，新添加的列的 prop 属性必须与 tableData 中的对象属性名称相同，否则会出现渲染错误。