vue单元格编辑
时间: 2023-06-22 12:20:03 浏览: 45
Vue中单元格编辑可以通过以下步骤实现:
1. 在表格中设置一个编辑状态的变量,例如 isEditing,初始值为 false。
2. 在表格中的每一行中添加一个编辑按钮,当点击编辑按钮时,将当前行设置为编辑状态,即将 isEditing 变量设置为 true。
3. 在表格中的每一行中添加一个保存按钮和一个取消按钮,当点击保存按钮时,将当前行的编辑状态保存至数据源中,并将 isEditing 变量设置为 false;当点击取消按钮时,将当前行的编辑状态恢复至未编辑状态,并将 isEditing 变量设置为 false。
4. 在表格中的每一行中,使用 v-if 或 v-show 来控制显示编辑状态和未编辑状态下的单元格内容,以及编辑状态下的保存和取消按钮。
以下是一个简单的示例:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="index">
<template v-if="!item.isEditing">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @click="edit(index)">编辑</button>
</td>
</template>
<template v-else>
<td><input v-model="item.name"></td>
<td><input v-model="item.age"></td>
<td>
<button @click="save(index)">保存</button>
<button @click="cancel(index)">取消</button>
</td>
</template>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ name: '张三', age: 20, isEditing: false },
{ name: '李四', age: 25, isEditing: false },
{ name: '王五', age: 30, isEditing: false }
]
}
},
methods: {
edit(index) {
this.list[index].isEditing = true
},
save(index) {
this.list[index].isEditing = false
},
cancel(index) {
this.list[index].isEditing = false
}
}
}
</script>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)