效果图
实现
<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;
}
};