vue实现表格可编辑
Vue实现表格可编辑的方法
使用v-model绑定数据
通过v-model绑定表格单元格的数据，结合v-if或v-show切换编辑状态。
示例代码：
<template>
<table>
<tr v-for="(row, index) in tableData" :key="index">
<td @click="startEdit(index, 'name')">
<span v-if="!row.editing">{{ row.name }}</span>
<input v-else v-model="row.name" @blur="stopEdit(index)" />
</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'Item 1', editing: false },
{ name: 'Item 2', editing: false }
]
};
},
methods: {
startEdit(index, field) {
this.tableData[index].editing = true;
},
stopEdit(index) {
this.tableData[index].editing = false;
}
}
};
</script>使用第三方库
借助element-ui或vxe-table等库快速实现可编辑表格。
以element-ui为例：
<template>
<el-table :data="tableData" border>
<el-table-column prop="name" label="Name">
<template #default="{ row }">
<el-input v-if="row.editing" v-model="row.name" />
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="Operation">
<template #default="{ row }">
<el-button @click="toggleEdit(row)">{{ row.editing ? 'Save' : 'Edit' }}</el-button>
</template>
</el-table-column>
</el-table>
</template>动态组件切换
通过动态组件实现单元格的编辑与非编辑状态切换。
示例代码：
<template>
<table>
<tr v-for="row in tableData" :key="row.id">
<td>
<component
:is="row.editing ? 'input' : 'span'"
v-model="row.name"
@blur="row.editing = false"
/>
<button @click="row.editing = !row.editing">Toggle</button>
</td>
</tr>
</table>
</template>注意事项
- 数据绑定需确保响应式更新，避免直接修改数组索引。
- 编辑状态管理应清晰，避免多个单元格同时进入编辑状态导致冲突。
- 移动端需考虑输入法兼容性，建议使用
@blur而非@change事件。
