zoukankan      html  css  js  c++  java
  • ant design vue中使用TreeSelect懒加载

    项目中使用下拉机构懒加载,tree Select控件。

           <a-tree-select
                v-model="form1.constructionCompany"
                style=" 100%"
                :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                :replace-fields="{children:'children', key:'id', value: 'label'}"
                :tree-data="orgTree"
                :load-data="onLoadData"
                placeholder="请选择施工单位"
                allow-clear>                           
            </a-tree-select>
    

      其中要指定唯一的key值,我这里id是唯一的

           onLoadData(treeNode) {
              const _this = this;
              return new Promise((resolve) => {
                if (Array.isArray(treeNode.dataRef.children) && treeNode.dataRef.children.length) {
                  console.log('treeNode.dataRef.children', treeNode.dataRef.children);
                  resolve()
                  return
                } 
                //如果没有值,根据当前节点id获取子节点并挂在树节点中,添加到对应父节点的children中
                publicapi.constructionQueryOrg(treeNode.dataRef.id).then((res) => {
                    treeNode.dataRef.children = res;
                    _this.orgTree = [..._this.orgTree];
                    console.log('treeNode.dataRef.children', treeNode.dataRef.children);
                }).catch();
                resolve()
              })
            }
    

      

  • 相关阅读:
    react条件渲染
    js用replaceAll全部替换的方法
    批量重命名图片,去除括号
    [转]自定义alert弹框,title不显示域名
    [转]ASCII码表及扩展ASCII码表,方便查阅
    [转]PHP中file_put_contents追加和换行
    Response
    Redirect
    Request
    Paginator
  • 原文地址:https://www.cnblogs.com/theblogs/p/14791268.html
Copyright © 2011-2022 走看看