在
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：
编辑模式，可以是 cell、row 中的一个，默认为 cell。
- showIcon：是否显示
编辑图标，默认为 true。
- showTooltip：是否显示
编辑提示，默认为 true。
- autoClear：是否在
编辑完成后自动清除已
编辑的内容，默认为 true。
4. 在 columns 数组中设置需要
编辑的列的属性，其中需要设置 editable 属性为 true，表示该列可被
编辑。
5. 在组件中
实现 handleEdit、handleSave、handleCancel 等方法，分别用于处理
编辑、保存、取消操作。
6. 在 ElTable 组件上添加 scopedSlots，用于自定义
编辑的
单元格内容。
下面是一个示例代码：
```
<template>
<
el-table :data="tableData" :columns="tableColumns" :edit-config="editConfig">
<
el-table-column label="姓名" prop="name" :editable="true">
<template #default="{row, column, $index}">
<div v-if="!column.editing">{{ row.name }}</div>
<div v-else>
<el-input v-model="row.name" size="mini"></el-input>
</div>
</template>
</
el-table-column>
<
el-table-column label="年龄" prop="age" :editable="true">
<template #default="{row, column, $index}">
<div v-if="!column.editing">{{ row.age }}</div>
<div v-else>
<el-input v-model="row.age" size="mini"></el-input>
</div>
</template>
</
el-table-column>
<
el-table-column label="操作">
<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="handleCancel(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: 'EditableTable',
data() {
return {
tableData: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 }
],
tableColumns: [
{ label: '姓名', prop: 'name', editable: true },
{ label: '年龄', prop: 'age', editable: true },
{ label: '操作' }
],
editConfig: {
trigger: 'click',
mode: 'cell',
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);
},
handleCancel(row: any) {
this.$refs.table.toggleRowEdit(row, false);
}
}
});
</script>
```
在上述代码中，我们引入了 ElTable、ElTableColumn、ElButton、ElInput 组件，并在组件中声明了 tableData、tableColumns、editConfig、handleEdit、handleSave、handleCancel 等属性和方法。
在模板中，我们使用 ElTable 组件渲染数据，并设置了可
编辑的列和操作列，同时使用 scopedSlots 自定义了
编辑的
单元格内容。
在脚本中，我们
实现了 handleEdit、handleSave、handleCancel 等方法，通过 $refs.table.toggleRowEdit 方法
实现编辑的开启、保存、取消等操作。
最终效果为：单击
单元格可进
行编辑，
编辑完成后可保存或取消。
超级会员免费看
订阅专栏 解锁全文
721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
