Vue el-table 鼠标点击即可编辑任意格，表头可动态添加，表格内容也可动态添加

<template>
  <div class="app-container">
    <el-table :data="tableData" style="width: 80%;align: center"  max-height="550" @cell-click="tsetClick" @header-click="headerTest">
      <el-table-column :label="item.propName" :property="item.prop" v-for="item in tableColumnList" :key="item.prop"
                       align="center">
        <template slot-scope="scope">
          <span @click="getIndex(scope.$index)">{{scope.row[scope.column.property]}}</span>
        </template>
      </el-table-column>
      <el-table-column width="120" prop="addTableHeaderName" align="center">
        <template slot="header">
          <i class="el-icon-plus" style="font-size: 20px"></i>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px;margin-left: 25px">
      <el-button @click="addTableData" icon="el-icon-plus" size="big" style="font-size: 20px;width: 8%"></el-button>
    </div>
    <el-dialog :visible.sync="dialogForHeader" title="修改项目流程名称" width="800">
      <el-form ref="form" :model="tableHeader" label-width="80px">
        <el-form-item label="表头名称">
          <el-input v-model="tableHeader.tableHeaderName" placeholder="请输入表头名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogForTable" title="修改项目流程内容" width="800">
      <el-form ref="form" :model="tableCell" label-width="120px">
        <el-form-item label="流程内容名称">
          <el-input v-model="tableCell.tableCellData" placeholder="流程内容名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableCellIndex: '',  //列计数器
        columnName: '',  //列名
        tableCell: { tableCellData: '' },  //表格定义
        dialogForTable: false,  //表格编辑弹出框
        num: 7,  //列个数
        num2: 7,  //排个数
        tableHeader: { tableHeaderName: '', property: '' },  //表头定义
        dialogForHeader: false,  //表头编辑弹出框
        // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据  你要用的话可以调用后台接口获取tableColumnList，注意数据格式
        tableColumnList:
          [
            { prop: '0', propName: '编号' },
            { prop: '1', propName: '名字' },
            { prop: '2', propName: '保质期' },
            { prop: '3', propName: '特点1' },
            { prop: '4', propName: '特点2' },
            { prop: '5', propName: '特点3' }
          ],

        tableData: [{
          0: '2016-05-01',
          1: '王小虎1',
          2: '上海市普陀区金沙江路 1518 弄',
          3: '2016-05-02',
          4: '王小虎',
          5: '上海市普陀区金沙江路 1518 弄'
        }, {
          0: '2016-05-02',
          1: '王小虎1',
          2: '上海市普陀区金沙江路 1518 弄',
          3: '2016-05-02',
          4: '王小虎',
          5: '上海市普陀区金沙江路 1518 弄'
        }, {
          0: '2016-05-03',
          1: '王小虎1',
          2: '上海市普陀区金沙江路 1518 弄',
          3: '2016-05-02',
          4: '王小虎',
          5: '上海市普陀区金沙江路 1518 弄'
        }, {
          0: '2016-05-04',
          1: '王小虎1',
          2: '上海市普陀区金沙江路 1518 弄',
          3: '2016-05-02',
          4: '王小虎',
          5: '上海市普陀区金沙江路 1518 弄'
        }, {
          0: '2016-05-05',
          1: '王小虎1',
          2: '上海市普陀区金沙江路 1518 弄',
          3: '2016-05-02',
          4: '王小虎',
          5: '上海市普陀区金沙江路 1518 弄'
        }, {
          0: '2016-05-06',
          1: '王小虎1',
          2: '上海市普陀区金沙江路 1518 弄',
          3: '2016-05-02',
          4: '王小虎',
          5: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    },
    // watch: {
    //   'tableData':{
    //     handler: function(newVal, oldVal) {
    //       // TO DO
    //       console.log("newVal:", newVal);
    //       console.log("oldVal:", oldVal);
    //     },
    //     deep: true,
    //     immediate: true
    //   },
    // },
    methods: {
      handleEdit(index, row) {
        console.log(index, row)
      },
      handleDelete(index, row) {
        console.log(index, row)
      },
      getIndex(index) {
        console.log('index', index)
        this.tableCellIndex = null;
        this.tableCellIndex = index;
        //console.log("this.tableCellIndex",this.tableCellIndex);
      },
      tsetClick(row, column, cell, event) {
        this.dialogForTable = true;
        this.columnName = '';
        this.columnName = column.property;
        this.tableCell.tableCellData = '';
        this.tableCell.tableCellData = row[this.columnName];
        console.log('this.columnName', this.columnName);
        console.log('this.tableCell.tableCellData', this.tableCell.tableCellData);
        // console.log("这里是表格双击事件",cell)
        // console.log("这里是表格双击事件",event)
      },
      //添加表头，修改表头
      headerTest(val) {
        if (val.property == 'addTableHeaderName') {
          console.log('这里是表格tou部点击,添加头部事件', val);
          this.tableColumnList.push({ prop: this.num.toString(), propName: '点击编辑项目流程名称' });
          for (let i = 0; i < this.tableData.length; i++) {
            //this.tableData[i][parseInt(this.num)] = "请添加内容";
            this.$set(this.tableData[i], [parseInt(this.num)], '请添加内容')
          }
          this.num = this.num + 1;
        } else {
          console.log('这里是表格tou部点击，修改头部事件', val);
          this.tableHeader.tableHeaderName = '';
          this.tableHeader.property = '';
          this.tableHeader.tableHeaderName = val.label;
          this.tableHeader.property = val.property;
          console.log(this.tableHeader.tableHeaderName);
          this.dialogForHeader = true;
        }
      },
      //表头编辑提交
      submitForm() {
        console.log('点击提交按钮');
        for (let i = 0; i < this.tableColumnList.length; i++) {
          console.log('this.tableHeader.property', this.tableHeader.property);
          console.log('this.tableColumnList[i].prop', this.tableColumnList[i].prop);
          if (this.tableColumnList[i].prop === this.tableHeader.property) {
            this.tableColumnList[i].propName = this.tableHeader.tableHeaderName
          }
        }
        console.log(this.tableColumnList);
        this.dialogForHeader = false;
      },
      //表格内容编辑提交
      submitForm1(val) {
        //console.log("点击提交按钮");
        if (this.tableCellIndex === '' || this.tableCellIndex === null) {
          alert('亲，请精准点击表格中的字进行修改！')
        } else {
          console.log("this.tableCellIndex",this.tableCellIndex);
          console.log('this.columnName', this.columnName);
          console.log('this.tableData[this.tableCellIndex][this.columnName]', this.tableData[this.tableCellIndex][this.columnName]);
          console.log('this.tableData[this.tableCellIndex]', this.tableData[this.tableCellIndex]);
          console.log(this.tableCell.tableCellData)
          this.tableData[this.tableCellIndex][this.columnName] = this.tableCell.tableCellData;
          console.log(this.tableData[this.tableCellIndex])
          console.log("~~~~~~~~~~~~~~")
          console.log(val)
          // console.log(this.tableData)
          // this.$set(this.tableData[this.tableCellIndex-1], [this.columnName], this.tableCell.tableCellData);
          //console.log(this.tableData)
          //this.rush()
        }
        this.dialogForTable = false;
      },
      //强制刷新数据
      rush() {
        this.$set(this.tableData)
      },
      //取消表头编辑
      cancel() {
        //console.log("点击取消按钮");
        this.dialogForHeader = false
      },
      //取消表格内容编辑
      cancel1() {
        //console.log("点击取消按钮");
        this.dialogForTable = false
      },
      //添加一行新的表格内容
      addTableData(){
        console.log('这里是表格添加事件')
        console.log("this.tableData1",this.tableData);
        var newData = {};
        for (let i = 0; i < this.num; i++) {
          newData[i] = "点击编辑";
        }
        this.tableData.push(newData);
        console.log("this.tableData2",this.tableData);
      }

    },

  }
</script>