element UI表格双击变成输入框输入数据

<template>
  <div class="Table">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      show-summary
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @cell-dblclick="tableEdit"
    >
      <el-table-column type="selection" width="80"> </el-table-column>
      <el-table-column label="日期" width="150">
        <template slot-scope="scope">{{ scope.row.data }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="150"> </el-table-column>
      <el-table-column prop="amount1" label="数值1" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="amount2" label="数值2" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="amount3" label="数值3" show-overflow-tooltip>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="deleteAdmin(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import http from "../http";
export default {
  name: "tableinfo",
  data() {
    return {
      tableData: [
        {
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, 
      ],
      multipleSelection: [],
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除数据
    deleteAdmin(val) {
      console.log(val);
      // http.post('/adminDel',)
    },
    adminInfo() {
    
    },
    // 双击表格修改数据
    tableEdit(row, column, cell, event) {
      console.log('row',row)
      console.log("colum", column)
      console.log("cell", cell)
      console.log('event', event)
      if (column.label == '数值1' || column.label == '数值2' || column.label == '数值3') {
        var beforeVal = event.target.textContent;
        event.target.innerHTML = "";
        let str = `<div class='cell'>
            <div class='el-input'>
              <input type='text' placeholder='请输入内容' class='el-input__inner'>
            </div>
        </div>`;
        cell.innerHTML = str;
        //  获取双击后生成的input  根据层级嵌套会有所变化
        let cellInput = cell.children[0].children[0].children[0];
        cellInput.value = beforeVal;
        cellInput.focus(); // input自动聚焦
        // 失去焦点后  将input移除
        cellInput.onblur = function () {
          let onblurCont = `<div class='cell'>${cellInput.value}</div>`;
          cell.innerHTML = onblurCont; // 换成原有的显示内容
          // 调用axios接口
        };
      }
    },
  },
  created() {
    this.adminInfo();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>