Vue 3 + Element Plus 封装单列控制编辑的可编辑表格组件的方法
作者：前端学步
在Web应用开发中实现表格数据编辑功能至关重要,本文将详细介绍如何使用Vue3和ElementPlus库来构建一个支持单列编辑的表格组件,本教程详细阐述了组件创建过程和数据绑定机制,帮助你快速掌握Vue3中表格编辑功能的实现,感兴趣的朋友一起看看吧
在Web应用开发中，经常需要提供表格数据的编辑功能。本文将介绍如何使用Vue 3结合Element Plus库来实现一个支持单列控制编辑功能的表格，并通过封装组件的形式提高代码的复用性。通过本教程，你将学会如何构建一个具备单列控制编辑功能的表格组件，并在表单提交时保存更改。
目标
- 实现一个基本的表格，其中包含日期、名称和描述等列。
- 表格中的每一项都可以在点击编辑图标后进入编辑模式。
- 编辑模式下可以修改表格单元格的内容。
- 编辑完成后，可以通过失去焦点的方式提交更改。
- 支持单列控制编辑，即可以单独控制每一列表格单元格的编辑状态。
- 封装成可复用的组件，便于在其他项目中使用。
创建表格组件
我们将创建一个主组件App.vue和一个子组件EditableCell.vue来实现表格的编辑功能。
主组件 App.vue
<template>
<div class="table-layout">
<el-table :data="tableData">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="date" label="日期">
<template #default="scope">
<EditableCell
:cell-data="scope.row.date"
:is-editing="scope.row.isEditDate"
:column="scope.column.property"
:row="scope.row"
@toggleEdit="toggleEdit"
@applyChanges="applyChanges"
/>
</template>
</el-table-column>
<el-table-column prop="name" label="名称">
<template #default="scope">
<EditableCell
:cell-data="scope.row.name"
:is-editing="scope.row.isEditName"
:column="scope.column.property"
:row="scope.row"
@toggleEdit="toggleEdit"
@applyChanges="applyChanges"
/>
</template>
</el-table-column>
<el-table-column prop="description" label="描述">
<template #default="scope">
<EditableCell
:cell-data="scope.row.description"
:is-editing="scope.row.isEditDescription"
:column="scope.column.property"
:row="scope.row"
@toggleEdit="toggleEdit"
@applyChanges="applyChanges"
/>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import { ref } from 'vue';
import EditableCell from './EditableCell.vue'; // 确保路径正确
import { ElTable, ElTableColumn, ElInput, ElIcon } from 'element-plus';
import { Edit } from '@element-plus/icons-vue';
// 优化后的tableData
const tableData = ref([
{
id: 1,
date: '2024-08-01',
name: '项目A',
description: '这是一个关于项目A的描述',
isEditDate: false,
isEditName: false,
isEditDescription: false
},
{
id: 2,
date: '2024-08-15',
name: '项目B',
description: '这是一个关于项目B的描述',
isEditDate: false,
isEditName: false,
isEditDescription: false
},
{
id: 3,
date: '2024-09-01',
name: '项目C',
description: '这是一个关于项目C的描述',
isEditDate: false,
isEditName: false,
isEditDescription: false
}
]);
function toggleEdit(column, row) {
if (column && row) {
const editKey = `isEdit${column.charAt(0).toUpperCase() + column.slice(1)}`;
row[editKey] = !row[editKey];
}
}
function applyChanges(newValue, column, row) {
if (column && row) {
row[column] = newValue;
const editKey = `isEdit${column.charAt(0).toUpperCase() + column.slice(1)}`;
row[editKey] = false;
}
}
</script>
<style scoped>
.table-layout {
width: 60%;
margin: 60px auto;
}
.edit-icon {
margin: 10px 0 0 10px;
}
</style>子组件 EditableCell.vue
<template>
<div>
<span v-if="!isEditing">{{ displayData }}</span>
<el-input
v-else
v-model="displayData"
style="width: 120px;"
@blur="onBlur"
/>
<el-icon color="#409EFF" class="edit-icon" @click="onToggleEdit">
<Edit />
</el-icon>
</div>
</template>
<script>
export default {
name: 'EditableCell',
props: ['cellData', 'isEditing', 'column', 'row'], // 添加row属性
emits: ['toggleEdit', 'applyChanges'],
data() {
return {
displayData: this.cellData
};
},
watch: {
cellData(newVal) {
this.displayData = newVal;
}
},
methods: {
onToggleEdit() {
this.$emit('toggleEdit', this.column, this.row); // 传递column和row
},
onBlur() {
this.$emit('applyChanges', this.displayData, this.column, this.row); // 传递column和row
}
}
}
</script>
<style scoped>
.edit-icon {
margin: 10px 0 0 10px;
}
</style>说明
子组件 (EditableCell.vue):
- 使用内部状态
displayData来存储编辑时的值，并通过watch确保它与cellData同步。 - 在模板中，根据编辑状态显示不同的内容。
- 在
onBlur方法中提交更改，并正确调用applyChanges方法。
父组件 (App.vue):
- 在模板中，通过
scope.column.property获取列的属性名称，并将其传递给子组件。 - 在模板中，通过
scope.row将行数据传递给子组件。 - 在
toggleEdit方法中，通过构造的editKey来切换编辑状态。 - 在
applyChanges方法中，通过构造的editKey来更新编辑状态，并保存新值。
通过这种方式，我们实现了表格的编辑功能，并确保了编辑状态下数据的正确提交。
总结
本文介绍了如何使用Vue 3和Element Plus实现一个带有编辑功能的表格。通过本文的步骤，你可以轻松地在自己的项目中实现类似的表格编辑功能。希望这篇教程对你有所帮助！
到此这篇关于Vue 3 + Element Plus 封装单列控制编辑的可编辑表格组件的文章就介绍到这了,更多相关Vue 3 Element Plus 编辑表格组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！