ant design of vue a-tree 异步加载

a-tree 异步树真是太多坑了,不显示文字,点击根节点没反应,点击子节点没反应,点击子节点出现的是上一个子节点内容,切换是否展示监管部门时点击过的子节点没反应,好在问题都一一解决了,记录一下。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<a-checkbox @change="onCheckboxDeptChange"> 是否展现非监管部门 </a-checkbox>
 <a-tree
            :replaceFields="replaceFields"
            :loadedKeys="loadedKeys"
            @expand="onExpand"
            @load="loadDept"
            :expandedKeys="expandedKeys"
            :load-data="onLoadDeptData"
            :tree-data="treeDeptData"
          />
data() {
    return {
      loadedKeys: [],
      expandedKeys: [],
      isShowAll: false, //非监管部门是否展示
      treeDeptData: [],
      replaceFields: {
        children: 'children',
        title: 'text',
        key: 'id',
      }, // 树数据结构匹配替换映射
      }
 }
//loadedKeys	(受控)已经加载的节点,需要配合 loadData 使用
    //	节点加载完毕时触发
    loadDept(loadedKeys) {
      this.loadedKeys = loadedKeys
    },

    //展开/收起节点时触发
    onExpand(keys) {
       // expandedKeys(.sync)	(受控)展开指定的树节点
      this.expandedKeys = keys
    },
    // 异步加载数据
    onLoadDeptData(treeNode) {
      return new Promise((resolve) => {
        setTimeout(() => {
          this.requestGet(
            `/Dept/RegionDeptTreeByParent?isShowAll=${this.isShowAll}&&nodeTypeValue=${treeNode.dataRef.typeEnum}&&parent=${treeNode.dataRef.id}`
          ).then((res) => {
            treeNode.dataRef.children = res.data.map((item) => {
              return item
            })
            this.treeDeptData = [...this.treeDeptData]
            resolve()
          }, 1000)
        })
      })
    },

    //获取树结构
    RegionDeptTreeByParent() {
      this.loadedKeys=[]
      this.expandedKeys=[]
      this.requestGet('/Dept/RegionDeptTreeByParent').then((res) => {
        this.treeDeptData = res.data.map((item) => {
          item.isLeaf = false
          return item
        })
      })
    },
    //是否展现非监管部门
    onCheckboxDeptChange(e) {
      console.log(`checked = ${e.target.checked}`)
      if (e.target.checked == true) {
        this.isShowAll = true
      } else {
        this.isShowAll = false
      }
      this.treeDeptData=[]
      this.RegionDeptTreeByParent()
    },
  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
Ant Design Vue中的Tree组件中,您可以使用异步加载数据来实现选中父节点就展开子节点的功能。以下是实现该功能的步骤: 1. 定义Tree节点的数据源,包括节点的id、名称、父节点id等属性。 2. 在Tree组件中设置show-expand属性为true,这将显示展开和折叠图标。 3. 设置Tree组件的load-data属性,指定异步加载数据的方法,该方法将根据父节点id加载节点数据。 4. 在Tree组件的节点模板中,使用 @click.native 事件监听节点的点击事件,并在事件处理程序中判断当前节点是否有子节点,如果有则展开,否则不展开。 下面是一个示例代码,用于实现选中父节点就展开子节点的功能: ```html <template> <a-tree :show-expand="true" :load-data="loadData" :tree-data="treeData" > <template slot-scope="{ data }"> <span :class="{'tree-node-disabled': data.disabled}" @click.native="handleClick(data)" > {{ data.title }} </span> </template> </a-tree> </template> <script> export default { data() { return { treeData: [], }; }, mounted() { this.loadData(null, (data) => { this.treeData = data; }); }, methods: { loadData(parent, callback) { // 根据父节点id加载节点数据 // ... }, handleClick(node) { // 判断当前节点是否有子节点 if (node.children && node.children.length > 0) { // 展开子节点 node.expanded = !node.expanded; } }, }, }; </script> ``` 在上面的示例代码中,loadData方法用于异步加载节点数据,handleClick方法用于处理节点的点击事件。当用户单击节点时,如果该节点有子节点,则会展开子节点,否则不会展开。请按照您的实际需求进行修改。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值