vxe复选框勾选事件 checkbox-change的使用

2024-07-06

vxe复选框勾选事件 checkbox-change的使用

​ vxe是一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项等…

1. vxe-table和vxe-grid

​ 在vxe-table中，列名使用标签定义，而在vxe-grid中，列名是通过:columns=“”，从data中返回而来。例如：

1.1 vxe-table的基本使用

border

ref="table"

style="width: 500px"

:data="tableData"

@checkbox-change="checkboxChange"

@checkbox-all="selectAllCheckboxChange"

>

1.2 vxe-grid的基本使用

border

ref="table"

style="width: 500px"

:data="tableData"

:columns="tableColumn"

@checkbox-change="checkboxChange"

@checkbox-all="selectAllCheckboxChange"

>

data() {

return {

tableColumn: [

{ type: 'checkbox', width: 50 , visible: false },

{ field: 'name', title: 'Name', width: 150, align: 'center' },

{ field: 'sex', title: 'Sex', align: 'center'},

{ field: 'age', title: 'Age', align: 'center' },

{ field: 'address', title: 'Address', align: 'center' },

],

}

},

2. 复选框可隐藏显示的用法

​ 在vex-table中，可以在绑定一个boolean型的变量用于控制复选框是否显示，但是只能用v-if进行绑定，而不能使用v-show。 ​ 在vxe-grid中，可以使用visible字段用于控制复选框是否显示，要改变其值可以使用this.$set方法，例如：

// 显示选框

this.$set(this.tableColumn, 0 , {type: 'checkbox', width: 50 ,visible: true})

// 隐藏选框

this.$set(this.tableColumn, 0 , {type: 'checkbox', width: 50 ,visible: false})

​ 此外，在打开复选框之前应该要使用clearCheckboxRow()方法清除之前已选的复选框，否则，打开复选框后会带出上一次关闭复选框时的结果

3 .进行勾选事件

​ 无论是vxe-table还是vxe-grid，都可以通过checkbox-change(勾选部分)和checkbox-all(全选)触发勾选事件，且只对 type=checkbox 有效,，使用时要加上$refs属性。

3.1 checkbox-change事件的基本使用

checkboxChange() {

const checkedRows = this.$refs.table.getCheckboxRecords()

},

3.1 checkbox-all事件的基本使用

selectAllCheckboxChange(checked) {

const checkedRows = checked.records

},

​ 此方法可以实现全选和全不选的情况，且只有点击列名出的复选框才会触发

3.3 测试用例

4. 完整代码

4.1 vxe-table

4.2 vxe-grid