Vue3 + Element-plus + TS —— 动态表格自由编辑
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column
v-for="item in tableHeader"
:key="item.prop"
:prop="item.prop"
:label="item.label">
<template #default="{ row, column }">
<el-input
v-if="editableCell(row, column)"
v-model="row[column.property]"
@blur="handleCellEdit(row, column)"
@keyup.enter="handleCellEdit(row, column)"
/>
<span v-else>{{ row[column.property] }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
interface TableData {
date: string;
name: string;
address: string;
}
interface TableHeader {
label: string;
prop: keyof TableData;
}
export default defineComponent({
setup() {
const state = reactive<{
tableData: TableData[];
tableHeader: TableHeader[];
editableCell(row: TableData, column: TableHeader): boolean;
handleCellEdit(row: TableData, column: TableHeader): void;
}>({
tableData: [
{ date: '2016-05-02', name: 'Tom', address: 'No.189, Grove St, Los Angeles' },
// ... more data
],
tableHeader: [
{ label: 'Date', prop: 'date' },
{ label: 'Name', prop: 'name' },
{ label: 'Address', prop: 'address' },
],
editableCell(row, column) {
// 逻辑判断某行某列是否处于可编辑状态
return row.edit === column.property;
},
handleCellEdit(row, column) {
// 处理单元格编辑后的逻辑
// 例如:设置当前编辑的单元格,保存数据,清除编辑状态等
// row[column.property] 已经是最新的值,可以直接进行数据保存操作
},
});
return { ...toRefs(state) };
},
});
</script>
这个代码实例展示了如何在Vue 3、Element Plus和TypeScript中创建一个可编辑的动态表格。它包括了表格数据定义、表头定义、编辑状态判断和编辑后的处理逻辑。这个例子简洁明了,并且使用了现代JavaScript开发的最佳实践。
评论已关闭