vue antUI 表格 层级 复选框 Ant Design of Vue

Ant Design of Vue 1.7.8 版本不支持选择子级点亮父级以及选择父级点亮子级；

效果图：

这里我用到的是选中：sfelectedRowKeys = [];
以及function onSelect();

<a-table :columns="columnsSelect" :data-source="tableData" :row-selection="{
            selectedRowKeys: sfelectedRowKeys,
            onChange: onSelectChanges,
            getCheckboxProps: getCheckboxProps,
            onSelect: onSelect,
            onSelectAll: onSelectAll,
            onSelectInvert: onSelectInvert,
          }" :expanded-row-keys.sync="expandedRowKeys" :rowKey="record => record.id" :scroll="{ x: 500, y: 700 }">
            <template slot="name" slot-scope="record">
              <div style="white-space: nowrap;">
                {{ record }}
              </div>
            </template>
          </a-table>

因为我写的时候dom结构没刷新导致选中没有效果，我这边采用了v-if的方法用来刷新dom结构，从而达到选中的效果；

涉及到了去重，以及考核数据，是因为我的需求是拿到数据进行数据考核，防止有重复进行去重；

主要基本逻辑是利用接口返回的path：
选父级点亮子级：是利用父级的id，先对数据进行扁平化处理，循环处理完成的数据，拿到path，如果path中有包含父id的则把id，push到选中的数组中，从而达到了父亮子的效果；

子亮父：也是利用path，首先拿到当前选中的层级，获取到父级的id，直接把父级的id添加到数组中即可，这是最简单的；

子全不选，父灭：这个要稍微复杂些，当然也是利用path，我先拿到当前层级的path，进行/分割成数组，再将数组删除最后一项(也就是自己),留下来的都是父级，爷级，然后通过扁平化处理的数据，拿到对应的对象，再看是否有子级，不出意外都有，但是要做个判断，如果有，再把子级的id都那到，去循环判断 选中的数组中是否有，如果都没有则把当前的id也删掉，从而达到父级灭掉的效果

onSelect(record, selected, selectedRows, nativeEvent) {
      this.tableShow = false;

      if (!selected) {
        // 删除
        this.sfelectedRowKeys = [];
        // 删除掉所有path中有id的数据
        selectedRows = selectedRows.filter((row) => !row.path.includes(record.id));
        this.sfelectedRowKeys = selectedRows.map((row) => row.id);
        // 使用 Set 数据结构对 this.sfelectedRowKeys 进行去重
        this.sfelectedRowKeys = Array.from(new Set(this.sfelectedRowKeys));

        let list = record.path.split('/'); // 将路径按 '/' 分割成数组
        list.pop(); // 删除最后一项

        let elementsToRemove = [];
        list.forEach((A) => {
          let obj = this.listRecursionListTemplate.filter((item) => item.parentId == A);

          if (obj && obj.length > 0) {
            let allChildrenNotInSelectedKeys = obj.every((B) => {
              return !this.sfelectedRowKeys.includes(B.id);
            });

            if (allChildrenNotInSelectedKeys) {
              elementsToRemove.push(A);
            }
          }
        });

        // 删除标记的元素
        elementsToRemove.forEach((element) => {
          this.sfelectedRowKeys = this.sfelectedRowKeys.filter(item => item !== element);
        });


        // 处理考核数据
        this.setcheck();
      } else {
        // 新增
        const flattenedData = this.flattenData(this.tableData);
        let selectedItems = flattenedData.filter((item) => item.path.includes(record.id));
        selectedItems.forEach((A) => {
          this.sfelectedRowKeys.push(A.id);
        });

        // 子级选中，父级默认选中
        let list = record.path.split('/');
        list.forEach((A) => {
          this.sfelectedRowKeys.push(A);
        })

        // 使用 Set 数据结构对 this.sfelectedRowKeys 进行去重
        this.sfelectedRowKeys = Array.from(new Set(this.sfelectedRowKeys));
        // 处理考核数据
        this.setcheck();
      }

      this.tableShow = true;
    },

问题图：![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/28596b6112c9481fbf4ff903dfad0330.png