如何在 Element UI 中动态添加或删除列？

Element UI 是一个基于 Vue.js 的组件库，用于快速构建桌面端应用程序。在 Element UI 中动态添加或删除列通常是在表格组件中实现的，可以通过数据数组的增减来控制表格列的显示。

以下是一个基本的步骤说明：

1. 准备一个表格组件，并定义好初始的数据源数组 `data`，这个数组中包含每一行的数据对象。

2. 在数据源数组中，根据需要动态添加或删除对象来添加或删除列。如果是在添加列的情况下，你需要创建一个新的对象并将其添加到数据源数组中。

3. 使用 Vue 的响应式系统，当数据源数组被修改时，表格会自动更新显示。

4. 你可能还需要添加一些按钮或操作来触发添加或删除列的动作，通过监听这些操作的事件来处理数据源数组的增减。

示例代码如下：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <!-- 更多列 -->
  </el-table>
  <el-button @click="addColumn">添加列</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        // 其他列的数据
      }],
      // 初始列配置
      columnsConfig: [
        { prop: 'date', label: '日期', width: 180 },
        { prop: 'name', label: '姓名', width: 180 },
        // 更多列的配置
      ]
    };
  },
  methods: {
    addColumn() {
      // 添加新的列配置
      this.columnsConfig.push({ prop: 'address', label: '地址', width: 180 });
      // 添加新的数据行
      this.tableData.push({
        date: '2023-01-01',
        name: '新用户',
        address: '新地址'
      });
    }
  }
};
</script>

在这个示例中，我们定义了一个表格组件和一个按钮。点击按钮会触发 `addColumn` 方法，该方法将新的列配置添加到 `columnsConfig` 数组中，并向 `tableData` 中添加一个新的数据对象。