vxe-table库如何获取checkbox选择的行
时间: 2023-10-17 13:21:46 浏览: 34
要获取vxe-table中已选中的行,可以通过以下步骤实现:
1. 在vxe-table组件中,为checkbox列添加一个自定义的勾选模板。
```html
<vxe-table-column type="selection" :width="60" align="center">
<template #selection="{ row }">
<input type="checkbox" v-model="row._rowChecked">
</template>
</vxe-table-column>
```
2. 在data中定义一个数组selectedRows,用于存储已选中的行。
```javascript
data() {
return {
tableData: [], // 表格数据
selectedRows: [] // 已选中的行
}
}
```
3. 监听vxe-table的selection-change事件,更新selectedRows数组。
```html
<vxe-table
:data="tableData"
@selection-change="onSelectionChange"
>
```
```javascript
methods: {
onSelectionChange(selectedRows) {
this.selectedRows = selectedRows
}
}
```
现在,selectedRows数组中就存储了所有已选中的行,可以在需要的地方使用它们。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![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)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)