element plus 表格 el-table 单元格可编辑

1.效果如下，‘内容’列单元格可以实现点击进行编辑

2.html代码

<el-table :data="tableData" border style="width: 100%;">
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="content" label="内容">
        	<!-- 表头 -->
            <template #header>
                <div style="display: flex; align-items: center">
                    <Edit style="width: 1em; height: 1em; margin-right: 3px" />
                    内容
                </div>
            </template>
            <template #default="scope">
                <el-popover placement="right" trigger="click" ref="popinfo" :width="175">
                    <template #reference>
                        <div @click="content = scope.row.content">
                            {{ scope.row.content }}
                        </div>
                    </template>
                    <el-input v-model="content" />
                    <el-button type="primary" link @click="modifyRow(scope.row)"
                        style="float: right; padding-top: 10px">保存</el-button>
                </el-popover>
            </template>
        </el-table-column>
    </el-table>

3.点击保存按钮调用接口

const tableData = ref('')  //获取tableData方法省略

const content  = ref('')  // input框绑定的值
//点击保存按钮调用方法
const modifyRow = async (row) => {
	let data = {
		nameId: row.nameId,
		oldContent: row.content,  //修改前单元格的值
		newContent: content.value  //修改后的单元格的值
	}  //调用接口传参
	//调用接口
	...
}