vxe-table中复选框默认全选
时间: 2023-09-01 13:07:45 浏览: 445
你可以通过设置v-model的值为一个包含所有选中项value值的数组来实现复选框的全选。具体操作如下:
1. 在表头中添加一个全选的复选框,绑定一个全选的事件。
2. 在表格中的每一行添加一个复选框,绑定一个选中事件。
3. 在全选事件中,将所有行的选中状态改为与全选复选框相同的状态,并将选中的数据存入一个数组中。
4. 在选中事件中,将选中的数据存入数组中。
以下是示例代码:
```html
<template>
<div>
<vxe-table
ref="table"
:data="tableData"
:columns="columns"
@checkbox-all="handleCheckAll"
@checkbox-change="handleCheckChange"
show-checkbox
checkbox-config="{highlight:true}"
></vxe-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 22 },
{ id: 3, name: '王五', age: 25 }
],
columns: [
{
type: 'selection',
width: 50,
align: 'center'
},
{
field: 'id',
title: 'ID'
},
{
field: 'name',
title: '姓名',
sortable: true
},
{
field: 'age',
title: '年龄',
sortable: true
}
],
selectedRows: []
}
},
methods: {
handleCheckAll(checked) {
this.selectedRows = checked ? this.tableData : []
},
handleCheckChange(selectedRows) {
this.selectedRows = selectedRows
}
},
watch: {
selectedRows(val) {
this.$emit('update:selectedRows', val)
}
}
}
</script>
```
在上面的代码中,我们通过设置`show-checkbox`和`checkbox-config`属性来显示复选框,并且可以设置选中时是否高亮显示。`handleCheckAll`方法中,如果全选框选中,我们将所有行的状态改为选中,并将数据存入`selectedRows`数组中;如果全选框取消选中,我们将所有行的状态改为未选中,并将`selectedRows`数组清空。在`handleCheckChange`方法中,我们只需要将选中的数据存入`selectedRows`数组中即可。在`watch`中,我们将`selectedRows`数组中的数据通过`update:selectedRows`事件发送出去,这样父组件就可以获取到选中的数据了。
阅读全文
相关推荐















