vxetable何如删除checkbox选中的行
时间: 2023-02-09 09:19:10 浏览: 128
可以使用 `v-model` 绑定 checkbox 的选中状态,然后在点击删除按钮时,遍历选中状态为 `true` 的行,从表格数据中删除对应的数据即可。
具体实现方式如下:
1. 在表格每一行中渲染一个 checkbox,并使用 `v-model` 绑定 checkbox 的选中状态。
```
<template>
<table>
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in dataList" :key="index">
<td>
<input type="checkbox" v-model="item.selected"/>
</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
dataList: [
{
name: '张三',
age: 20,
gender: '男',
selected: false
},
{
name: '李四',
age: 22,
gender: '男',
selected: false
},
{
name: '王五',
age: 25,
gender: '女',
selected: false
}
]
}
}
}
</script>
```
2. 在点击删除按钮时,遍历选中状态为 `true` 的行,从表格数据中删除对应的数据。
```
<template>
<div>
<table>
<!-- 省略表格代码 -->
</table>
<button @click="deleteSelected">删除选中行</button>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{
name: '张三',
age: 20,
gender: '男',
selected: false
},
{
name: '李四',
阅读全文