el-table动态添加行,列。自定义输入表头，input hover 显示文字

功能点：

1，动态添加行
2，动态添加列
3，右键表头删除列
4，右键表体删除行
5，表格hover提示当前单元格文字，自动换行
6，表头文字自定义
7，表头，添加按钮固定，表体自适应滚动

效果图：

代码：复制即可运行

<template>
  <div class="app-container haplotype-detail default-scrollbar">
    <div>
      <el-form ref="historyForm" :model="historyForm" size="small">
        <div class="table-box" @contextmenu.prevent.capture style="display:flex;">
          <el-table
            :header-cell-style="{background:'#f2f2f2'}"
            :data="historyForm.tableData"
            :loading="loading"
            style="width: 97%;"
            class="list-table default-scrollbar"
            size="mini"
            @header-contextmenu="rightClickColShowFun"
            @row-contextmenu="rightClickRowShowFun"
            :cell-class-name="tableClassName"
            :height="elTableHeight"
            border>
            <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 style="background:#ddd" class="headerBox" v-model="item.name"  @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]" @input="setInputVal" class="name-input"></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>