AntdesignVue实现下拉树结构懒加载,使用a-tree-select

<a-tree-select
  v-model="queryParam.gmtCreateDeptId"
  show-search
  style="width: 100%"
  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  :tree-data="signOrgNameOptions"
  placeholder=""
  allow-clear
  tree-data-simple-mode
  :load-data="onLoadData"
/>
data(){
  return{
    signOrgNameOptions: []
  }
},
created() {
  this.getTreeNode(0)
},
methods:{
  getTreeNode (id) {
      // 获取最外层数据
      getPersonnelTreeLazy(id).then(res => {
        res.data.forEach(item => {
          item.isLeaf = !item.hasChildren
        })
        this.signOrgNameOptions = res.data
      })
    },
    onLoadData(treeNode) {
      // 懒加载内部数据
      const _this = this
      return new Promise(resolve => {
        if (treeNode.dataRef.hasChildren === true) {
          getPersonnelTreeLazy(treeNode.dataRef.id).then(res => {
            const treeNodeData = res.data
            treeNodeData.forEach(item => {
              item.isLeaf = !item.hasChildren
            })
            treeNode.dataRef.children = treeNodeData
            _this.signOrgNameOptions = [..._this.signOrgNameOptions]
            resolve()
          })
        }
      })
    },
}

瑞瑞_
73 声望8 粉丝