react.js ant-design中table 树结构三级嵌套时逻辑问题

实现三级嵌套树结构时,勾选三级里的子节点时候父节点也会自动勾选,当子节点大于一项时候取消勾选某一子结构时父节点不变;当子节点只有一项时父节点也会自动取消勾选

import StandardTablePage from '@/components/StandardTablePage';

  // 用户选中某一行
  userSelect(record, selected, selectedRows, nativeEvent) {
    let { selectedRowKeys } = this.state;
    let recordIdList = [];
    function getArrEqual(arr1, arr2) {
      let newArr = [];
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j] === arr2[i]) {
            newArr.push(arr1[j]);
          }
        }
      }
      return newArr;
    }
    function handleIdInfo(item, selected) {
      let rows = idObj[item.id];
      if (!selected) {
        let parentChildren = [];
        let newArrSelect = [];
        if (idObj[rows.parentId] && idObj[rows.parentId].children.length > 0) {
          idObj[rows.parentId].children.map(itemRen => {
            return parentChildren.push(itemRen.id);
          });
          newArrSelect = getArrEqual(parentChildren, selectedRowKeys);
          if (newArrSelect.length > 1) {
            selectedRowKeys = selectedRowKeys.filter(filterKey => filterKey !== item.id);
          } else {
            selectedRowKeys = selectedRowKeys.filter(filterKey => filterKey !== item.id);
            if (rows.parentId !== 1) {
              handleIdInfo(idObj[rows.parentId], selected);
            }
          }
        }
      } else {
        recordIdList.push(rows.id);
        if (rows.parentId !== 1) {
          handleIdInfo(idObj[rows.parentId], selected);
        }
      }
    }
    if (record.id !== 1) handleIdInfo(record, selected);
    // this.getChildrenIdList(record.children, recordIdList); // 取消
    // 选中
    if (selected) {
      selectedRowKeys = [...selectedRowKeys, ...recordIdList, 1];
    }
    this.setState({ selectedRowKeys: [...new Set(selectedRowKeys)] });
  }
    // 设置索引
  setRowIndex(dataList) {
    dataList.map(val => {
      rowIndex++;
      //得到他的整数的序列号(忽略了多级嵌套)
      val['rowIndex'] = rowIndex;
      //如果children存在且有长时
      if (val.children && val.children.length) {
        this.setRowIndex(val.children);
      } else {
        //如果children为空的话将children删除
        delete val.children;
      }
    });
  }
  
  render() {
    const { pagination, selectedRowKeys, rowss } = this.state;
    const {
      toAuthorize: { loading, total },
    } = this.props;
    const rowSelection = {
      selectedRowKeys,
      onSelect: this.userSelect.bind(this),
    };
    return (
      <StandardTablePage
        loading={loading}
        pagination={{ ...pagination, total }}
        rowKey={'id'}
        data={rowss}
        columns={this.columns}
        scroll={{ y: 600 }}
        onRow={this.handleChangeTable}
        rowSelection={rowSelection}
      >
      </StandardTablePage>
    );
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值