vxe-table表单多个复选框
时间: 2023-12-14 16:32:07 浏览: 40
可以使用vxe-table的selection-config配置项来实现表单中多个复选框的功能。具体步骤如下:
1. 在表格的columns中添加一个type为selection的列,用于显示复选框。
2. 在表格的props中设置selection-config属性,用于配置复选框的相关参数,例如选中的行数据、选中的key值等。
3. 在表格的methods中添加一个handleSelectionChange方法,用于处理复选框选中状态的变化。
下面是一个示例代码:
```html
<template>
<vxe-table
:data="tableData"
:columns="tableColumns"
:selection-config="selectionConfig"
@selection-change="handleSelectionChange">
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 20, gender: 'Male' },
{ id: 2, name: 'Mary', age: 25, gender: 'Female' },
{ id: 3, name: 'Tom', age: 30, gender: 'Male' }
],
tableColumns: [
{ type: 'selection', width: 60 },
{ field: 'id', title: 'ID', width: 80 },
{ field: 'name', title: 'Name', width: 120 },
{ field: 'age', title: 'Age', width: 80 },
{ field: 'gender', title: 'Gender', width: 100 }
],
selectionConfig: {
checkField: 'selected',
checkMethod: (params) => {
return params.row.selected
},
checkAllMethod: (params) => {
return params.rows.every(row => row.selected)
},
checkRowKey: 'id'
}
}
},
methods: {
handleSelectionChange(selection) {
console.log(selection)
}
}
}
</script>
```
在上面的示例代码中,我们在tableColumns中添加了一个type为selection的列,用于显示复选框。在selectionConfig中配置了复选框的相关参数,例如选中的行数据、选中的key值等。在methods中添加了一个handleSelectionChange方法,用于处理复选框选中状态的变化。当用户选中或取消选中某一行数据时,handleSelectionChange方法会被调用,并将选中的行数据作为参数传入。我们可以在该方法中处理选中状态的变化,例如将选中的行数据保存到一个数组中,或者将选中的行数据发送到后台进行处理。
相关推荐
![](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)