ElementUI中el-table双击单元格显示输入框

效果图

实现

 <el-table
          :data="formData.products"
          row-key="id"
          :show-header="true"
          style="width: 100%; margin-top: 16px"
          class="zq-table-theme-info"
          border
          @cell-dblclick="handleDbClick"
        >   <el-table-column prop="productName" label="产品名称" min-width="200">
            <template #default="scope">
              <el-input
                v-if="scope.row.isShowInput"
                v-model="scope.row.productName"
                style="width: 80%; margin-right: 8px"
                type="text"
                clearable
                placeholder="请输入目录名称"
              ></el-input>
              <el-button
                v-if="scope.row.isShowInput"
                link
                type="primary"
                size="small"
                @click="handleCancle(scope.row)"
              >
                取消 </el-button
              ><span v-else>{{ scope.row.productName }}</span></template
   ></el-table-column
 ></el-table>

const handleDbClick = (row, column, cell, event) => {
  if (column.property === 'productName') { //列名称
    row.isShowInput = true;
  } else {
    row.isShowInput = false;
  }
};
const handleCancle = (row) => {
  if (row.isShowInput) {
    row.isShowInput = false;
  }
};