结构:

<a-tree-select
                :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                :loadData="onLoadData"
                :treeData="orgTree"
                @change="orgtreehand"
                v-decorator="[
                  'org_parent_id',
                  {rules: [{ required: true, initialValue: 1, message: '请选择上级机构!' }]}
                ]"
              >
              </a-tree-select>

调用:

export default{
    data (){
        orgTree: []
    },
    created: {
        // 调用获取树数据的服务
        getOrgTree().then(res=>{
            this.orgTree = res.result.data
        })
    },
    methods: {
        onLoadData (treeNode) {
          const _this = this
          return new Promise((resolve) => {
            if (treeNode.dataRef.children) { // 有值了直接渲染
              resolve()
              return
            }
            // 没有值根据当前父节点获取下面子节点并挂在树节点中,添加到对应父节点的children中
            getOrgTree({ org_id: treeNode.dataRef.org_id }).then(res => {
              treeNode.dataRef.children = res.result.data
              _this.orgTree = [..._this.orgTree]
            })
            resolve()
          })
        }
    }
}

 

Logo

前往低代码交流专区

更多推荐