关于前端: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()
          })
        }
      })
    },
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理