ant中table表格的多选框如何清空

向右看齐 2021-07-24 23:49 1271阅读 0赞

*  项目需求：表格前加一列多选框，可以做多选和提交，还可以在提交后、重置或者翻页后对多选框清空
 *  使用的组件是[ant中下的可操作选择的table][ant_table]；这样我们就知道复选框选中的那些数据id，其实就是selectedRowKeys数组里的id，操作就可控了；
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]
 *  效果![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 1]
 *  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 2]

.  
.  
.

*  主要思路是：在提交后、重置或者翻页后对多选框清空，

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;
        },

[ant_table]: https://www.antdv.com/components/table-cn/#components-table-demo-selection-and-operation
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/7233c0f003a54f8393e4d155e4c8c82d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/1880235134d744e0ac913f3d8a922794.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210724/2644090cc7374652be23e4c3ca1a3164.png