陶醉的松鼠 | 陶醉的松鼠

== @cell-dblclick=“tableEdit”==

vue

  <el-table
            :data="tableData"
            height="95%"
            border
            @cell-dblclick="tableEdit"
            @click="clickTd"
            :highlight-current-row="false"
            style="width: 100%;margin: auto;background:#334D66;"
            :header-cell-style="{color: '#C8D6F1', fontSize: '18px', height:'64px',  background: '#3F607F'}"
        >
          <el-table-column align="center" prop="evaluateContent" label="目标">
          </el-table-column>
          <el-table-column align="center" label="完成标志">
            <template slot-scope="scope">
              {{ scope.row.comment }}
            </template>
          </el-table-column>
      <.table>

javascript

tableEdit(row, column, cell, event) {
      console.log(row, column, cell, event)
      if (column.label) {
        var beforeVal = event.target.textContent;
        event.target.innerHTML = "";
        let str = `<div class='cell'>
            <div class='el-input'>
              <input type='text' placeholder='请输入内容' oninput = "value=value.replace(/[^\\d]/g,'')" 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接口
        };
      }
    },