vue表格选中后在另一个盒子显示,盒子里的数据删除后表格的选中状态取消
时间: 2024-02-21 18:58:08 浏览: 33
你可以通过在 Vue 中使用数据绑定来实现这个功能。具体来说,你可以创建一个数组来存储选中的数据,然后在表格中使用 `v-model` 指令将选中的数据与该数组进行绑定。例如:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>选中</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<input type="checkbox" v-model="selectedList" :value="item" />
</td>
</tr>
</tbody>
</table>
<div>
<button @click="deleteSelected">删除选中</button>
</div>
<div>
<h4>已选中的数据:</h4>
<ul>
<li v-for="(item, index) in selectedList" :key="index">{{ item.name }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 },
{ name: '王五', age: 22 },
{ name: '赵六', age: 24 },
],
selectedList: [],
};
},
methods: {
deleteSelected() {
this.selectedList.forEach((item) => {
const index = this.list.indexOf(item);
if (index !== -1) {
this.list.splice(index, 1);
}
});
this.selectedList = [];
},
},
};
</script>
```
在上面的代码中,我们定义了一个 `list` 数组来存储表格的数据,另外还定义了一个 `selectedList` 数组来存储选中的数据。在表格中,我们使用了 `v-for` 指令来遍历 `list` 数组,并使用 `v-model` 指令将选中的数据与 `selectedList` 进行双向绑定。当点击“删除选中”按钮时,我们遍历 `selectedList` 数组,并在 `list` 数组中删除相应的数据。最后,我们将 `selectedList` 数组清空,以取消表格的选中状态。