在
Vue3 TS 环境下，使用
Element Plus 的
ElTable 组件，可以通过设置 edit-config 属性来
实现单元格可被
编辑的功能。具体
实现步骤如下：
1. 首先需要安装
Element Plus，可以使用命令 npm install
element-plus 安装。
2. 在组件中引入
ElTable 组件，并设置相关属性，如 columns、data 等。
3. 在
ElTable 组件上设置 edit-config 属性，该属性的值为一个对象，包含以下属性：
- trigger：触发
编辑的方式，可以是 click、dblclick、manual 中的一个，默认为 click。
- mode：
编辑模式，可以是 c
ell、row 中的一个，默认为 c
ell。
- showIcon：是否显示
编辑图标，默认为 true。
- showTooltip：是否显示
编辑提示，默认为 true。
- autoClear：是否在
编辑完成后自动清除已
编辑的内容，默认为 true。
4. 在 columns 数组中设置需要
编辑的列的属性，其中需要设置 edi
table 属性为 true，表示该列可被
编辑。
5. 在组件中
实现 handleEdit、handleSave、handleCanc
el 等方法，分别用于处理
编辑、保存、取消操作。
6. 在
ElTable 组件上
添加 scopedSlots，用于自定义
编辑的
单元格内容。
下面是一个示例代码：
```
<template>
<
el-
table :data="
tableData" :columns="
tableColumns" :edit-config="editConfig">
<
el-
table-column lab
el="姓名" prop="name" :edi
table="true">
<template #default="{row, column, $index}">
<div v-if="!column.editing">{{ row.name }}</div>
<div v-
else>
<
el-input v-mod
el="row.name" size="mini"></
el-input>
</div>
</template>
</
el-
table-column>
<
el-
table-column lab
el="年龄" prop="age" :edi
table="true">
<template #default="{row, column, $index}">
<div v-if="!column.editing">{{ row.age }}</div>
<div v-
else>
<
el-input v-mod
el="row.age" size="mini"></
el-input>
</div>
</template>
</
el-
table-column>
<
el-
table-column lab
el="操作">
<template #default="{row, column, $index}">
<
el-button v-if="!column.editing" type="primary" size="mini" @click="handleEdit(row)">
编辑</
el-button>
<
el-button v-
else type="success" size="mini" @click="handleSave(row)">保存</
el-button>
<
el-button v-
else type="text" size="mini" @click="handleCanc
el(row)">取消</
el-button>
</template>
</
el-
table-column>
</
el-
table>
</template>
<script lang="ts">
import { defineComponent } from '
vue';
import {
ElTable,
ElTableColumn,
ElButton,
ElInput } from '
element-plus';
export default defineComponent({
name: 'Edi
tableTable',
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
],
tableColumns: [
{ lab
el: '姓名', prop: 'name', edi
table: true },
{ lab
el: '年龄', prop: 'age', edi
table: true },
{ lab
el: '操作' }
],
editConfig: {
trigger: 'click',
mode: 'c
ell',
showIcon: true,
showTooltip: true,
autoClear: true
}
};
},
components: {
ElTable,
ElTableColumn,
ElButton,
ElInput },
methods: {
handleEdit(row: any) {
this.$refs.
table.toggleRowEdit(row);
},
handleSave(row: any) {
this.$refs.
table.toggleRowEdit(row, false);
},
handleCanc
el(row: any) {
this.$refs.
table.toggleRowEdit(row, false);
}
}
});
</script>
```
在上述代码中，我们引入了
ElTable、
ElTableColumn、
ElButton、
ElInput 组件，并在组件中声明了
tableData、
tableColumns、editConfig、handleEdit、handleSave、handleCanc
el 等属性和方法。
在模板中，我们使用
ElTable 组件渲染数据，并设置了可
编辑的列和操作列，同时使用 scopedSlots 自定义了
编辑的
单元格内容。
在脚本中，我们
实现了 handleEdit、handleSave、handleCanc
el 等方法，通过 $refs.
table.toggleRowEdit 方法
实现编辑的开启、保存、取消等操作。
最终效果为：单击
单元格可进
行编辑，
编辑完成后可保存或取消。
超级会员免费看
订阅专栏 解锁全文
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
