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-inputv-if="scope.row.isShowInput"v-model="scope.row.productName"style="width: 80%; margin-right: 8px"type="text"clearableplaceholder="请输入目录名称"></el-input><el-buttonv-if="scope.row.isShowInput"linktype="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;}
};