vxe-tale 复选框--分页选择及回显

需求:

表格列表数据支持多选,选择的数据需要进行存储,要支持分页选择,并支持回显选择的数据。

实现方案:

基于vxe-table版本2.x

1.支持分页选择:需要设置vxe-table的checkbox-config的reserve属性为true。reserve属性的控制的是:否保留勾选状态。设置此属性之后可以支持分页选择。具体代码如下:


        
       

2.选中回显:checkbox-config中的checkRowKeys属性支持回显默认选中的数据(需要有 row-id,值与row-id绑定的字段相同,结构是数组),但是只能再初始化时执行一次。因此我们需要结合getRowById及setCheckboxRow方法实现,具体代码如下。

 let table = this.$refs.table
 for(let i =0; i < this.checkRowKeys.length; i++){
    table.setCheckboxRow(table.getRowById(this.checkRowKeys[i]), true)
 }

checkRowKeys:选中行的row-id对应字段的数组。

你可能感兴趣的:(前端,javascript,开发语言)