【vue】element-ui+vue添加表格的列并实现表头的自定义

效果图如下：

页面渲染：

<template>
  <div class="app-container">
    <!-- 表格增加列 -->
    <el-button
      type="danger"
      style="margin-bottom:5px"
      @click="dialogVisible=true"
    >增加列</el-button>
    <el-dialog
      title="增加列"
      :visible.sync="dialogVisible"
      width="40%"
      @close="closeDialog('tableForm')"
      @close-on-click-modal="closeDialog('tableForm')"
      @close-on-press-escape="closeDialog('tableForm')"
    >
      <el-form
        ref="tableForm"
        :model="tableForm"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="表格名称" style="margin-bottom: 20px;" prop="tableTitle">
          <el-select v-model="tableForm.tableTitle" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="表头名称" prop="headerName">
          <el-input v-model="tableForm.headerName" placeholder="例如：备注,操作" />
        </el-form-item>
        <el-form-item style="color:red">
          可设置多个表头，以英文逗号“,”隔开！
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="primary" size="mini" @click="addCol('tableForm')">确定</el-button>
        <el-button type="danger" size="mini" @click="closeDialog('tableForm')">取消</el-button>
      </div>
    </el-dialog>
    <div class="table-menu" style="margin-bottom:30px">
      <h4 style="text-align: center;margin: 0 0 20px 0;">{{ table1_info.title }}</h4>
      <el-table
        :data="table1_info.tableData11"
        style="width: 100%;"
        border
      >
        <el-table-column
          v-for="(item,index1) in table1_info.tableData11[0]"
          :key="index1"
          align="center"
          :label="index1"
        >
          <template slot-scope="scope">
            {{ scope.row[index1] }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-menu" style="margin-bottom:30px">
      <h4 style="text-align: center;margin: 0 0 10px 0;">{{ table2_info.title }}</h4>
      <el-table
        :data="table2_info.tableData22"
        style="width: 100%;"
        border
      >
        <el-table-column
          v-for="(item,index2) in table2_info.tableData22[0]"
          :key="index2"
          align="center"
          :label="index2"
        >
          <template slot-scope="scope">
            {{ scope.row[index2] }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

功能实现：

<script>export default {
  data() {
    return {
      // 表格增加列 start
      table1_info: {
        title: '表格1',
        tableData11: [
          {
            '值1': '1',
            '值2': '2',
            '值3': '3'
          },
          {
            '值1': '11',
            '值2': '22',
            '值3': '33'
          }
        ]
      },
      table2_info: {
        title: '表格2',
        tableData22: [
          {
            '值11': '10',
            '值22': '20',
            '值33': '30'
          },
          {
            '值11': '110',
            '值22': '220',
            '值33': '330'
          }
        ]
      },
      dialogVisible: false,
      tableForm: {
        tableTitle: '',
        headerName: ''
      },
      options: ['表格1', '表格2'],
      rules: {
        tableTitle: [
          { required: true, message: '请选择表格名称', trigger: 'change' }
        ],
        headerName: [
          { required: true, message: '请至少输入一个表头', trigger: 'blur' }
        ]
      },
      // 表格增加列 end
    }
  },

  methods: {
    // 增加列
    addCol(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 如果有多个表头，就将其以","进行分割，形成数组arr
          var arr = this.tableForm.headerName.split(',')
          console.log(arr)
          console.log(this.tableForm.tableTitle)
          if (this.tableForm.tableTitle === '表格1') {
            for (const key in arr) { // 增加表头
              for (let i = 0; i < this.table1_info.tableData11.length; i++) {
                this.table1_info.tableData11[i][arr[key]] = ''
              }
            }
            // 关闭弹框
            this.dialogVisible = false
            // 清除弹框缓存
            this.closeDialog('tableForm')
          } else if (this.tableForm.tableTitle === '表格2') {
            for (const key in arr) {
              for (let i = 0; i < this.table2_info.tableData22.length; i++) {
                this.table2_info.tableData22[i][arr[key]] = ''
              }
            }
            this.dialogVisible = false
            this.closeDialog('tableForm')
          }
        }
      })
    },
    // 关闭弹窗
    closeDialog(formName) {
      this.$refs[formName].resetFields()
      this.tableForm.tableTitle = ''
      this.tableForm.headerName = ''
      this.dialogVisible = false
    }
   }
}
</script>

样式：

.table-menu{
  background: #FFF;  border: 1px solid #DCDFE6;
  -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  padding: 10px;
}