vue-ant-design的Tree(树形结构)的父子节点关联问题

        树形结构父子节点有关联的逻辑是:父节点选中,子节点自动选中,子节点全都选中,父节点自动选中。

        项目需求是:父节点可以控制子节点,也就是点击选中父节点时,子节点全部选中,点击取消父节点时,子节点也随之取消;但是点击子节点选中或者取消都不会影响到父节点。
第一步:切断父子节点之间的关联。
在这里插入图片描述

checkStrictly控制父子节点关联,默认为false,表示父子节点有关联,将他的值改为true,切断父子节点之间的关联。
第二步:监控check事件,操作绑定数据checkedKeys。

在这里插入图片描述 

在这里插入图片描述 

点击复选框,e.checked为true,表示选中,为false,表示取消。
为true时,filter数据treeData,将父节点e.node.eventKey的子节点children里的key赋值给checkedKeys,这就完成了点击父节点,子节点自动选中的需求;
为false时,filter数据checkedKeys.checked,将父节点e.node.eventKey的子节点children里的key从checkedKeys里筛选出去,这就完成了取消父节点,子节点自动取消的需求。
 

onCheck(checkedKeys, e) {
      if (e.checked) {
        const arr1 = this.treeData.filter((item) => {
          return item.key === e.node.eventKey;
        });
        if (arr1.length) {
          if (arr1[0].children) {
            arr1[0].children.filter((item) => {
              this.checkedKeys.checked.push(item.key);
              return item;
            });
          }
        }
      } else {
        this.checkedKeys.checked = this.checkedKeys.checked.filter((item) => {
          return !item.startsWith(e.node.eventKey);
        });
      }
    },

### 实现异步数据加载 在 `ant-design-vue` 中,可以通过配置特定属性来实现在树形结构组件中的异步数据加载。对于 `TreeSelect` 组件而言,设置 `treeDataSimpleMode` 和 `loadData` 属性能够支持按需加载子节点的数据[^3]。 下面是一个具体的实现方式: #### 使用 loadData 函数 定义一个名为 `loadData` 的函数用于发起网络请求获取子节点列表,并将其作为参数传递给 TreeSelect 组件。当用户展开某个父节点时会触发此方法执行并传入当前被点击项的信息。 ```javascript const onLoadData = (treeNode) => { return new Promise((resolve) => { if (treeNode.dataRef.children) { resolve(); return; } setTimeout(() => { // 模拟异步操作 treeNode.dataRef.children = [ { title: 'Child Node', value: 'child-1' }, { title: 'Another Child Node', value: 'child-2'} ]; resolve(); }, 1000); }); }; ``` #### 设置 treeCheckStrictly 及 labelInValue 参数 为了确保父子节点之间的关联关系以及正确处理回显逻辑,在初始化组件时还需要指定两个重要选项:`treeCheckStrictly=true` 表示允许单独勾选任意级别节点而不影响其上级;而 `labelInValue={true}` 则使得 v-model 返回的对象不仅包含 selectedKeys 而且还有对应的 labels ,从而方便前端展示完整的路径信息。 ```vue <template> <a-tree-select :tree-data="treeData" @change="handleChange" placeholder="Please select" :loadData="onLoadData" treeCheckable showCheckedStrategy="SHOW_ALL" allowClear style="width: 300px;" :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :treeDefaultExpandAll="false" :treeCheckStrictly="true" :labelInValue="true"> </a-tree-select> </template> <script setup lang="ts"> import { ref } from "vue"; // 假设初始状态只有根节点 let treeData = ref([ { key:'root',title:"Root",value:"root"} ]); function handleChange(value){ console.log(`selected ${JSON.stringify(value)}`); } </script> ``` 上述代码片段展示了如何利用 `ant-design-vue` 提供的功能构建具有懒加载特性的树状选择器控件。通过合理运用这些特性,可以有效减少初次渲染所需时间并提升用户体验。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值