table完成动态表头与动态数据

<template>
  <div class="app-container haplotype-detail default-scrollbar">
    <div>
      <el-form ref="historyForm" :model="historyForm" size="small">
        <div class="table-box" style="display:flex;" @contextmenu.prevent.capture>
          <el-table
            :header-cell-style="{background:'#f2f2f2'}"
            :data="historyForm.tableData"
            :loading="loading"
            style="width: 97%;"
            class="list-table default-scrollbar"
            size="mini"
            :cell-class-name="tableClassName"
            :height="elTableHeight"
            border
            @header-contextmenu="rightClickColShowFun"
            @row-contextmenu="rightClickRowShowFun"
          >
            <el-table-column label="序号" align="center" width="50">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column  v-for="(item,index) in historyForm.tableHeader" :key="index"  align="center" :prop="item.nameEn" class-name="cellDefault">
              <template  slot="header" slot-scope="scope">
                <el-tooltip  effect="light" placement="bottom" trigger="hover" :disabled="item.name?false:true">
                  <div slot="content" style="max-width:200px;">{{ item.name }}</div>
                  <el-input v-model="item.name" style="background:#ddd" class="headerBox"  @change="setColName(index,historyForm.tableHeader[index].name)" />
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <el-tooltip  effect="light" placement="bottom" trigger="hover" :disabled="scope.row[item.nameEn]?false:true">
                  <div slot="content" style="max-width:200px;">{{ scope.row[item.nameEn] }}</div>
                  <el-input v-model="scope.row[item.nameEn]" class="name-input" @input="setInputVal"></el-input>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="add-column" @click="addColSetting">+</div>
        </div>

        <div class="add-line" @click="addParamsSetting">+</div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HaplotypeDetail',
  data() {
    return {
      elTableHeight: 0,
      // 遮罩层
      loading: true,
      // 表单参数-表格内容数据
      historyForm: {
        // 表头列表数组
        tableHeader: [
          {
            name: '类型（自属性）',
            nameEn: 'typeSelf'
          },
          {
            name: '类型（生产属性）',
            nameEn: 'typeProduct'
          },
          {
            name: '类型（设备属性）',
            nameEn: 'typeEquipment'
          },
          {
            name: '类型（质量追溯属性）',
            nameEn: 'typeQuality'
          }
        ],
        tableData: [
          { index: 0, typeSelf: '集团', typeProduct: '', typeEquipment: '', typeQuality: '' },
          { index: 1, typeSelf: '公司', typeProduct: '', typeEquipment: '', typeQuality: '' },
          { index: 2, typeSelf: '厂区', typeProduct: '厂区', typeEquipment: '厂区', typeQuality: '厂区' },
          { index: 3, typeSelf: '车间', typeProduct: '车间', typeEquipment: '车间', typeQuality: '车间' },
          { index: 4, typeSelf: '线体', typeProduct: '线体', typeEquipment: '线体', typeQuality: '线体' },
          { index: 5, typeSelf: '工艺区', typeProduct: '工艺区', typeEquipment: '工艺区', typeQuality: '工艺区' },
          { index: 6, typeSelf: 'PLC区', typeProduct: 'PLC区', typeEquipment: 'PLC区', typeQuality: 'PLC区' },
          { index: 7, typeSelf: '安全区', typeProduct: '安全区', typeEquipment: '安全区', typeQuality: '安全区' },
          { index: 8, typeSelf: '工位', typeProduct: '工位', typeEquipment: '工位', typeQuality: '工位' },
          { index: 9, typeSelf: '设备组', typeProduct: '设备组', typeEquipment: '设备组', typeQuality: '设备组' },
          { index: 10, typeSelf: '设备', typeProduct: '设备', typeEquipment: '设备', typeQuality: '设备' },
          { index: 11, typeSelf: '附属设备LV1', typeProduct: '附属设备LV1', typeEquipment: '附属设备LV1', typeQuality: '附属设备LV1' },
          { index: 12, typeSelf: '附属设备LV2', typeProduct: '附属设备LV2', typeEquipment: '附属设备LV2', typeQuality: '附属设备LV2' },
          { index: 13, typeSelf: '附属设备LV3', typeProduct: '附属设备LV3', typeEquipment: '附属设备LV3', typeQuality: '附属设备LV3' }
        ]
      },
      isAddCol: true,
      currentClickRow: null,
      currentClickCol: null
    }
  },
  mounted: function() {
    // 高度调整
    this.$nextTick(() => {
      this.elTableHeight = document.body.clientHeight - 130
      console.log(document.body.clientHeight)
      console.log(this.elTableHeight)
    })
  },
  methods: {
    // 新增行
    addParamsSetting() {
      let item = {
        typeEquipment: '',
        typeProduct: '',
        typeQuality: '',
        typeSelf: ''
      }
      for (let i in this.historyForm.tableHeader) {
        if (i > 3) {
          item[this.historyForm.tableHeader[i].nameEn] = ''
        }
      }
      this.historyForm.tableData.push(item)
      console.log(this.historyForm.tableData)
    },
    // 删除当前行
    deleteRow(index) {
      this.historyForm.tableData.splice(index, 1)
    },
    // 在数据最后新增一列
    addColSetting() {
      for (let i in this.historyForm.tableHeader) {
        if (this.historyForm.tableHeader[i].name === '') {
          this.isAddCol = false
        } else {
          this.isAddCol = true
        }
      }
      if (this.isAddCol) {
        this.addColList()
      } else {
        this.$message.success('还有未填写的列')
      }
    },
    // 新增列
    addColList() {
      let index = this.historyForm.tableHeader.length - 1
      this.historyForm.tableHeader.push({ name: '', nameEn: 'selfName' + index })
      let list = this.historyForm.tableData
      for (let i = 0; i < list.length; i++) {
        this.$set(list[i]['selfName' + index], '')
      }
    },
    // 修改表头名fun
    setColName(index, val) {
      let head = this.historyForm.tableHeader
      this.$set(head[index], 'name', val)
      this.$forceUpdate()
      console.log(head)
    },
    // 输入内容数据的fun
    setInputVal(e) {
      for (let i in this.historyForm.tableHeader) {
        if (this.historyForm.tableHeader[i].name === '') {
          this.isAddCol = false
        } else {
          this.isAddCol = true
        }
      }
      if (!this.isAddCol) {
        this.$message.success('请先填写完成所有表头内容，且确保无误！')
      }
    },
    // 右键单击选中行-确认是否删除行
    rightClickRowShowFun(row, column, event) {
      this.currentClickRow = row.index
      this.$confirm('此操作将永久删除当前行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRow(this.currentClickRow)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 右键单击选中行-确认是否删除列
    rightClickColShowFun(column, event) {
      this.currentClickCol = column.index
      if (this.currentClickCol <= 3) {
        this.$message({
          type: 'info',
          message: '当前列不支持删除！'
        })
      } else {
        this.$confirm('此操作将永久删除当前列, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteCol(this.currentClickCol)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    // 给数据的row、column赋index，便于进行删除行、删除列
    tableClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex - 1
    },
    // 删除当前列
    deleteCol(index) {
      let nameCur = this.historyForm.tableHeader[index].nameEn
      for (const key in this.historyForm.tableData) {
        // 删除nameEn属性
        let data = this.historyForm.tableData[key]
        console.log(data[nameCur])
        delete data[nameCur]
      }
      console.log(this.historyForm.tableData)
      this.historyForm.tableHeader.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.haplotype-detail{
   .add-column, .add-line{
        background:#f2f2f2;
        width:30px;
        cursor:pointer;
        font-size:30px;
        color:#00c561;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        display: flex;
   }
   .add-line{
    height:30px;
    width:97%;
   }
   .headerBox{
    padding:0px;
   }
}
</style>