通过点击或者双击单元格触发行编辑，替换dom元素

这种方案使用el-table组件的事件回调函数实现

• cell-click（当某个单元格被点击时会触发该事件）
• cell-dblclick（当某个单元格被双击击时会触发该事件）

<script>
function tableEdit(row, column, cell, event) {
  if (column.property === 'qty') {
    //取出单元格的值
    var beforeVal = event.target.textContent;
    //置空单元格容器内元素
    event.target.innerHTML = '';
    //替换成el-input
    let str = `<div class='cell'>
            <div class='editNum'>
              <input type='number' placeholder='请输入内容' class='el-input__inner' min='1'>
            </div>
        </div>`;
    cell.innerHTML = str;
    //  获取单击后生成的input  根据层级嵌套会有所变化
    let cellInput = cell.children[0].children[0].children[0];
    cellInput.value = beforeVal;
    cellInput.focus(); // input自动聚焦
    // 失去焦点后  将input移除
    cellInput.onblur = () => {
      let value = cellInput.value > 1 ? cellInput.value : 1;
      let onblurCont = `<div class='cell'>${value}</div>`;
      cell.innerHTML = onblurCont; // 换成原有的显示内容
      dialogAddForm.dataSource.forEach((item) => {
        if (item.matMgtId === row.matMgtId) {
          item.qty = value;
        }
      });
    };
  }
</script>

<template>
  <el-table
    :data="dialogAddForm.dataSource"
    stripe
    height="calc(100vh - 480px)"
    style="width: 100%; min-height: 200px"
    v-loading="dialogAddForm.loading"
    element-loading-text="加载中..."
    @cell-click="tableEdit"
  >
    <el-table-column
      min-width="180"
      label="物料编码"
      prop="code"
      :sortable="false"
    >
    </el-table-column>
  </el-table>
</template>

使用行点击事件，组件本身实现

行被点击变成可编辑的样式。

<template>
  <el-table
    style="width: 100%; min-height: 300px"
    :data="dialogForm.dataSource"
    border
    :height="
      !dialogForm.editFlag ? 'calc(100vh - 300px)' : 'calc(100vh - 330px)'
    "
    row-key="id"
    v-loading="dialogForm.checkPlanItemloading"
    element-loading-text="加载中..."
    @row-click="selectCurrentRow"
    :row-class-name="getRowClass"
  >
    <el-table-column prop="no" label="序号" min-width="55" :resizable="false">
      <template #default="scope">
        <span>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="itemCode"
      label="项点编码"
      min-width="120"
      :resizable="false"
    >
      <template #default="scope">
        <span
          v-if="
            !dialogForm.editFlag || dialogForm.currentRow.id !== scope.row.id
          "
        >
          {{ scope.row.itemCode }}</span
        >
        <el-input
          v-else
          placeholder="项点编码"
          v-model="scope.row.itemCode"
        ></el-input>
      </template>
    </el-table-column>
    <el-table-column
      prop="itemName"
      label="项点名称"
      min-width="150"
      :resizable="false"
    >
      <template #header> <span style="color: red">*</span>项点名称 </template>
      <template #default="scope">
        <span
          v-if="
            !dialogForm.editFlag || dialogForm.currentRow.id !== scope.row.id
          "
          >{{ scope.row.itemName }}</span
        >
        <el-input
          v-else
          placeholder="项点名称"
          v-model="scope.row.itemName"
        ></el-input>
      </template>
    </el-table-column>
    。。。。。。
  </el-table>
</template>

<script>
function selectCurrentRow(row) {
  dialogForm.currentRow = row;
}

function getRowClass({ row: record }) {
  if (record.id === dialogForm.currentRow?.id) {
    return 'selected-row';
  }
  return '';
}
</script>

<style scoped lang="less">
:deep(.el-table .selected-row) {
  background-color: #ccc;
}
</style>

通过row-class-name改变行点击后的样式变化，row-click保存row信息用来判断。