欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果

 更新時(shí)間:2023年01月04日 09:54:51   作者:北鳥南游  
本文主要介紹了Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

使用elementui樹組件,通過(guò)懶加載加載數(shù)據(jù),并設(shè)置默認(rèn)展開和全部選中的效果。

<el-tree
      :load="loadNode"
      node-key="org_id"
      is-connection-line
      show-checkbox
      lazy
      :default-checked-keys="defaultSelectCids"
      :default-expanded-keys="defaultExpandedCids"
      :props="defaultProps"
      @check-change="handleCheckChange"
      ref="orgTreeData"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span style="padding-left: 10px"> {{ data.in_service.count }} </span>
      </span>
    </el-tree>

主要設(shè)置load替換data屬性。

還設(shè)置屬性lazy,以及default-checked-keys和default-expanded-keys屬性。并配置options的isLeaf屬性。

dataTree = [];
  defaultProps = {
    children: 'child',
    label: 'org_name',
    isLeaf: data => {
      return !data.has_child;
    },
  };
  defaultExpandedCids = []; // 選出所有pid為0的 cid節(jié)點(diǎn)
  defaultSelectCids = []; // 選出所有cid
async loadNode(node, resolve) {
    if (!node.data) {
      const res = await this.getOrg(null);
      if (res && Array.isArray(res)) {
        res.forEach(item => {
          if (item.has_child && item.parent.id === 0) {
            this.defaultExpandedCids.push(item.org_id);
          }
          this.defaultSelectCids.push(item.org_id);
        });
      }
      resolve(res);
    } else {
      resolve(await this.getOrg(node.data.org_id));
    }
  }
  handleCheckChange(data, checked, indeterminate) {
    console.log(data, checked, indeterminate, this.$refs.orgTreeData.getCheckedKeys());
  }
  async getOrg(orgId) {
    
    this.orgTreeLoading = true;
    const {
      data: { tree_data = {} },
      error,
    } = await http.API();
    if (!error) {
      this.orgTreeLoading = false;
      return new Promise(resolve => {
        resolve(tree_data);
      });
    }
  }

效果圖如下

到此這篇關(guān)于Element樹形控件el-tree懶加載并設(shè)置默認(rèn)展開和選中的效果的文章就介紹到這了,更多相關(guān)Element el-tree懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論