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 //修改后的单元格的值
} //调用接口传参
//调用接口
...
}