vue2实现el-dialog实现新增el-table-column的数据

要实现在el-dialog中新增el-table-column的数据，可以考虑以下步骤：

1. 在el-dialog中添加表单，用于输入新增的el-table-column数据；
2. 点击确定按钮时，将表单中的数据加入到el-table-column的数据源中；
3. 在el-table中动态绑定el-table-column，使新增的列能够显示出来。

具体实现步骤如下：

1. 在el-dialog中添加表单，用于输入新增的el-table-column数据：

<template>
  <el-dialog title="新增列" :visible.sync="dialogVisible">
    <el-form :model="form">
      <el-form-item label="列名">
        <el-input v-model="form.label"></el-input>
      </el-form-item>
      <el-form-item label="字段名">
        <el-input v-model="form.prop"></el-input>
      </el-form-item>
      <el-form-item label="宽度">
        <el-input v-model.number="form.width"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addColumn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        label: '',
        prop: '',
        width: ''
      }
    }
  },
  methods: {
    addColumn() {
      // 将表单数据加入到el-table-column的数据源中
      this.$emit('add-column', this.form);
      this.dialogVisible = false;
    }
  }
}
</script>

2. 点击确定按钮时，将表单中的数据加入到el-table-column的数据源中：

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">新增列</el-button>
    <el-table :data="tableData">
      <!-- 动态绑定el-table-column -->
      <el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop" :width="column.width"></el-table-column>
    </el-table>
    <column-dialog :visible.sync="dialogVisible" @add-column="addColumn"></column-dialog>
  </div>
</template>

<script>
import ColumnDialog from './ColumnDialog';

export default {
  components: {
    ColumnDialog
  },
  data() {
    return {
      dialogVisible: false,
      columns: [
        {
          label: '姓名',
          prop: 'name',
          width: 100
        },
        {
          label: '年龄',
          prop: 'age',
          width: 100
        }
      ],
      tableData: [
        {
          name: '张三',
          age: 18
        },
        {
          name: '李四',
          age: 20
        }
      ]
    }
  },
  methods: {
    addColumn(column) {
      // 将新增列加入到columns中
      this.columns.push({
        label: column.label,
        prop: column.prop,
        width: column.width
      });
    }
  }
}
</script>

3. 在el-table中动态绑定el-table-column，使新增的列能够显示出来。

通过在el-table-column上使用v-for指令，动态绑定columns中的数据，使新增的列能够被el-table显示出来。