vue2 table组件勾选怎沫获取
时间: 2023-08-09 12:01:13 浏览: 135
在Vue2中,要获取Vue表格组件中的勾选项,可以通过以下步骤进行。
1. 首先,在Vue组件的data选项中定义一个数组,用于保存被勾选的数据。例如:
```
data() {
return {
selectedItems: []
}
}
```
2. 在table组件的每一行中,添加一个checkbox用于选择。例如:
```
<tr v-for="item in items" :key="item.id">
<td><input type="checkbox" v-model="selectedItems" :value="item"></td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
```
这里使用了v-model指令将checkbox绑定到selectedItems数组上,并将当前行的数据项item作为value传入。
3. 在Vue组件的methods选项中,编写一个方法来获取勾选的数据。例如:
```
methods: {
getSelectedItems() {
console.log(this.selectedItems);
}
}
```
这个方法可以打印出selectedItems数组中的数据。
4. 如果需要在勾选状态发生变化时触发获取数据的方法,可以在checkbox中添加一个change事件监听器:
```
<input type="checkbox" v-model="selectedItems" :value="item" @change="getSelectedItems">
```
这样每次checkbox的勾选状态发生变化时,getSelectedItems方法就会被调用,从而获取最新的勾选数据。
通过以上步骤,就可以实现在Vue2的table组件中获取勾选的数据。
阅读全文