element ui Table 根据后台返回的表头列表 动态显示列 和 双击单元格 修改单元格内的内容

附上代码

<template>
  <div class="hello">
    <el-table :data="tableData" @cell-dblclick="handle" style="width: 100%">
      <template v-for="(item,index) in tableTitle" >
        <el-table-column :prop="item.prop" :label="item.lable" :key="index" width="300" align="center">
          <template slot-scope="scope">
              <div  class="tableEditInput" v-if="scope.row.isEdit && scope.row.EditName==scope.column.property">
                <el-input v-model="qdata[item.prop]" :id="scope.row.IntExcelLine+scope.column.id"  @blur="editEmployee(scope.row,scope.column)"></el-input>
              </div>
              <div v-if="!scope.row.isEdit || scope.row.EditName!=scope.column.property">{{ scope.row[item.prop] }}</div>
            </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //临时数据
      qdata:"",
      //表格数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      //表头列表
      tableTitle:[
        {lable:"日期",prop:"date"},
        {lable:"名称",prop:"name"},
        {lable:"地址",prop:"address"},
      ],
    };
  },
  mounted() {},
  methods: {
    //双击单元格修改  input
    handle(row, column, cell, event) {
      this.qdata = row;
      //使用 this.$set 往row里插入 控制input显示隐藏的参数
      this.$set(row, "isEdit", true);
      this.$set(row, "EditName", column.property);
      console.log("colum", row, column, cell, event);
      console.log(row.IntExcelLine + column.id);
    },
    //修改完成后隐藏input
    editEmployee(row){
      //使用this.$delete 删除参数
       this.$delete(row, "isEdit");
       this.$delete(row, "EditName");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
>>> .el-input {
  width: 100%;
}
</style>
<style>
</style>