-
项目需求:表格前加一列多选框,可以做多选和提交,还可以在提交后、重置或者翻页后对多选框清空
-
使用的组件是ant中下的可操作选择的table;这样我们就知道复选框选中的那些数据id,其实就是selectedRowKeys数组里的id,操作就可控了;
-
效果
.
.
.
- 主要思路是:在提交后、重置或者翻页后对多选框清空,
this.selectedRowKeys = [];
- 其中对于已同步的数据,按照正常来说,复选框应该置灰不可选的;但是我没有用table下的可选择复选框那个组件,我自己的办法是,点击选择的时候,会触发多选框的方法onSelectChange;自己手动将未同步的数据选出来,然后赋值给selectedRowKeys;
onSelectChange(selectedRowKeys) {var _self = this;var dataIds = [];this.data.forEach(ele =>{if (ele.status == '未同步') {dataIds.push(ele.databaseId);}})// console.log('可选的id',dataIds);// console.log('选择了多选框', selectedRowKeys);var aaa = []dataIds.forEach(ele =>{selectedRowKeys.forEach(num =>{if (num == ele) {// console.log(ele);aaa.push(ele);}})})// this.selectedRowKeys = selectedRowKeys;//手动筛选出可选的 赋值给组件的selectedRowKeys this.selectedRowKeys = aaa;},