vxe-table复选框默认全选
时间: 2023-07-06 20:35:11 浏览: 482
你可以通过设置 `default-expand-all` 和 `default-selected` 属性来实现 `vxe-table` 复选框的默认全选。
`default-expand-all` 属性可以设置默认展开所有行,这样复选框就会全部显示出来,用户就可以直接进行全选操作。
`default-selected` 属性可以设置默认选中的行数据,这样你就可以在初始化时将需要选中的行数据传入,从而实现复选框的默认全选。
示例代码如下:
```
<template>
<vxe-table
:data="tableData"
:checkbox-config="{ showHeader: true }"
default-expand-all
:default-selected="tableData"
>
<vxe-table-column type="checkbox"></vxe-table-column>
<vxe-table-column field="name" title="Name"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20 },
{ name: 'Mike', age: 22 },
{ name: 'Tom', age: 25 },
]
}
}
}
</script>
```
在上面的例子中,`default-expand-all` 属性设置为 `true`,`default-selected` 属性设置为 `tableData`,这样在初始化时就会默认将所有的行数据选中,从而实现了复选框的默认全选。
阅读全文