Vue+Element 表格双击切换成输入框

使用el-table的cell-dbclick方法来操作

dbclick(row, column, cell, event) {
    // row 当前点击的行， column当前点击的列， cell当前双击的dom， event当前鼠标点击的事件
    // 获取字段名
  const propert = column.property
  if (column.label === '你需要点击的那一列的label') {
    // 获取点击之前的值
    const beforeVal = event.target.textContent
    // 清空之前的值
    event.target.textContent = ''
    // 把点击的值替换成input
    const str = `<div class="cell">
      <div
        class="el-input"
        style="display: flex; justify-content: center; align-items: center"
      >
        <input
          type="text"
          placeholder="请输入${column.label}"
          class="el-input__inner"
          style="margin-right: 10px"
        />
        <i class="el-icon-check"></i>
        <i class="el-icon-close"></i>
      </div>
    </div>`
    cell.innerHTML = str
    // 获取双击后生成的input 层级嵌套会变化
    const cellInput = cell.children[0].children[0].children[0]
    const check = cell.children[0].children[0].children[1]
    const close = cell.children[0].children[0].children[2]
    // 把之前的值当默认值传入input
    cellInput.value = beforeVal
    // 自动获取焦点
    cellInput.focus()
    // 失去焦点 将input换成之前的span
    check.onclick = async () => {
      cell.innerHTML = this.saveCellValue(cellInput.value)
      // 把输入的值放到字段里
      row[property] = cellInput.value
      const res = await this.$store.dispatch('调用修改接口', row)
      if (res.code === 0) {
        this.$message.success(`修改成功`)
      }
    }
    close.onclick = () => {
      cell.innerHTML = this.saveCellValue(beforeVal)
    }
  }
}