vue3 antd treeSelect 懒加载问题

最新推荐文章于 2024-07-11 10:57:49 发布

小杨同学的技术成长之路

最新推荐文章于 2024-07-11 10:57:49 发布

阅读量1.5k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/y273849/article/details/120971548

版权

本文介绍了如何使用Ant Design的Tree Select组件实现搜索、动态加载数据等功能。通过v-model、tree-data、load-data等属性配置，结合onLoadData方法从后台获取并渲染树形选择数据。同时，展示了如何判断并设置节点的叶子状态以优化用户体验。

摘要由CSDN通过智能技术生成

html代码

<a-tree-select
	show-search
	v-model:value="form.organId"
	:style="{ width: '100%' }"
	:tree-data="treeData"
	:load-data="onLoadData"
	:replace-fields="{ children: 'children', title: 'deptName', key: 'deptId', value: 'deptId' }"
	placeholder="请选择审批机构"
	@change="treeSel"
	treeNodeFilterProp="title"
	:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
	></a-tree-select>

方法

const onLoadData = (treeNode:any)=>{
  return new Promise((resolve:any)=>{
    if(treeNode.dataRef.children){
      resolve()
      return
    }
    childTree({parentId:treeNode.dataRef.deptId}).then(res=>{
      res.data.forEach((item:any) => {
        if(item.childs.length == 0){
          item.isLeaf = true  //这里要注意，判断该节点是否为叶子，如果是叶子，添加isLeaf为true
        }
      });
      treeNode.dataRef.children = res.data
    })
    resolve()
  })
}