vue表格实现单行编辑
Vue 表格实现单行编辑的方法
使用 v-if 和 v-else 切换显示模式
在表格的每一行中，通过 v-if 和 v-else 控制编辑状态。默认显示文本内容，点击编辑按钮时切换为输入框。
<template>
<table>
<tr v-for="(item, index) in tableData" :key="index">
<td>
<span v-if="!item.isEditing">{{ item.name }}</span>
<input v-else v-model="item.name" />
</td>
<td>
<button @click="toggleEdit(item)">
{{ item.isEditing ? '保存' : '编辑' }}
</button>
</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', isEditing: false },
{ name: '李四', isEditing: false },
],
};
},
methods: {
toggleEdit(item) {
item.isEditing = !item.isEditing;
},
},
};
</script>使用 v-show 控制编辑状态
与 v-if 类似，但 v-show 仅切换 CSS 的 display 属性，适合频繁切换的场景。
<template>
<table>
<tr v-for="(item, index) in tableData" :key="index">
<td>
<span v-show="!item.isEditing">{{ item.name }}</span>
<input v-show="item.isEditing" v-model="item.name" />
</td>
<td>
<button @click="toggleEdit(item)">
{{ item.isEditing ? '保存' : '编辑' }}
</button>
</td>
</tr>
</table>
</template>结合计算属性实现临时编辑
通过临时变量保存编辑前的数据，避免直接修改原始数据，适合需要取消编辑的场景。
<template>
<table>
<tr v-for="(item, index) in tableData" :key="index">
<td>
<span v-if="!item.isEditing">{{ item.name }}</span>
<input v-else v-model="tempEditData.name" />
</td>
<td>
<button @click="startEdit(item)" v-if="!item.isEditing">编辑</button>
<button @click="saveEdit(item)" v-else>保存</button>
<button @click="cancelEdit(item)" v-if="item.isEditing">取消</button>
</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', isEditing: false },
{ name: '李四', isEditing: false },
],
tempEditData: {},
};
},
methods: {
startEdit(item) {
this.tempEditData = { ...item };
item.isEditing = true;
},
saveEdit(item) {
Object.assign(item, this.tempEditData);
item.isEditing = false;
},
cancelEdit(item) {
item.isEditing = false;
},
},
};
</script>使用第三方表格组件（如 Element UI）
Element UI 的 el-table 组件内置了编辑功能，可以通过插槽自定义编辑逻辑。
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名">
<template #default="{ row }">
<span v-if="!row.isEditing">{{ row.name }}</span>
<el-input v-else v-model="row.name" />
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="{ row }">
<el-button @click="toggleEdit(row)">
{{ row.isEditing ? '保存' : '编辑' }}
</el-button>
</template>
</el-table-column>
</el-table>
</template>注意事项
- 编辑状态需要绑定到每一行的数据对象上，避免全局状态冲突。
- 临时数据保存适合需要撤销操作的场景。
- 第三方组件通常提供更完善的编辑功能，如校验、键盘事件等。
