博客

• 项目需求：表格前加一列多选框，可以做多选和提交，还可以在提交后、重置或者翻页后对多选框清空

• 使用的组件是
  
  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;
    },