el-table实现表格动态新增/插入/删除 表格列，可编辑单元格

在Vue.js中，`el-table`是一个基于Element UI的高级表格组件，可以很方便地处理表格数据的增删改查操作。要实现在表格中动态添加、插入、删除列以及支持单元格编辑，你可以按照以下步骤操作：

1. 定义表格的数据源 `data` 作为数组，每个元素代表一行数据，包含固定的列和可变的列信息。

data() {
  return {
    tableData: [
      {固有列1: '值1', 固定列2: '值2'},
      {固有列1: '值3', 固定列2: '值4'}
    ],
    // 可变列定义
    columns: [
      {prop: '固定列1', label: '固定列1', fixed: 'left'}, // 左固定列
      {prop: '固定列2', label: '固定列2'} // 不固定列
    ]
  };
}

2. 使用`columns`动态添加新列。例如，当你需要添加新的动态列时，可以在适当的时候追加到`columns`数组中。

addColumn(newColumn) {
  this.columns.push(newColumn);
  this.$nextTick(() => {
    this.tableData.forEach(item => (item[newColumn.prop] = '')); // 初始化新列的值
  });
},

3. 对于单元格的可编辑，可以利用`el-form`和`el-input`结合，给每个需要编辑的单元格加上一个`v-model`绑定。同时，当表头的`type`设置为`selection`时，可以配合`@row-click`事件监听行点击，打开对应的编辑状态。

<el-table-column type="selection" width="55"></el-table-column>
<template v-for="(column, index) in columns">
  <el-table-column :key="index" :prop="column.prop" :label="column.label">
    <template slot-scope="scope">
      <!-- 如果是可编辑单元格 -->
      <el-form-item :model="scope.row[column.prop]" v-if="isEditable(column)">
        <el-input v-model="scope.row[column.prop]"></el-input>
      </el-form-item>
      <!-- 否则直接展示单元格内容 -->
      <span v-else>{{ scope.row[column.prop] }}</span>
    </template>
  </el-table-column>
</template>

<script>
// 检查当前列是否允许编辑
function isEditable(column) {
  return column.editable !== false;
}
</script>

4. 动态删除列时，你需要移除对应的数据源和列配置，并更新视图。

deleteColumn(index) {
  this.columns.splice(index, 1); // 移除列
  this.tableData.forEach(item => delete item[this.columns[index].prop]); // 清空已删除列的数据
},