乐趣区

关于前端:AntdesignVue中使用atreeselect

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()})
        }
      })
    },
}
退出移动版