el-tree樹怎么設(shè)置懶加載及設(shè)置默認(rèn)勾選

今天小編給大家分享一下el-tree樹怎么設(shè)置懶加載及設(shè)置默認(rèn)勾選的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

el-tree樹設(shè)置懶加載以及設(shè)置默認(rèn)勾選

當(dāng)需要對element-ui組件懶加載進行拓展功能，如添加查看更多或者其他圖標(biāo)進行加載，可使用下面的方法進行調(diào)整使用

1.加載tree樹時，要求能夠通過點擊查看更多進行懶加載，且可進行勾選復(fù)選框獲取數(shù)據(jù)，由于界面存在多個Tree樹，故命名多個ref值傳遞進來子組件Tree樹內(nèi)

 <DsmasTreeLoadMore
 ref="dataStructure"
   :show-checkbox="true"
   :bind-ref="{label: '結(jié)構(gòu)化數(shù)據(jù)',id: 'dataStructure'}"
 />
 <script>
	import DsmasTreeLoadMore from '@/views/components/dsmas-tree-loadmore';
	export default {
		components: {
			DsmasTreeLoadMore 
		}
		data(){
			return{
				defaultProps: {
			       label: 'label',
			        children: 'children',
			        isLeaf: 'leaf'
			      },
			    pageNumber: 1,
			    pageSize: 10,
			    complete: false,
			    defaultCheckedKeys: [],
				treeData: {
				    dataStructure: [
				      {
				        label: '結(jié)構(gòu)化數(shù)據(jù)',
				        id: 'dataStructure',
				        children: [],
				        disabled: true
				      }
				    ],
				      dataUnstructure: [
				      {
				        label: '非結(jié)構(gòu)化數(shù)據(jù)',
				        id: 'dataUnstructure',
				        children: [],
				        disabled: true
				      }
				    ],
				    collapse:false
				}
			},
	  created() {
	    this.getTreeLoadmore();
	  },
	  methods: {
	    // 查看更多按鈕
	    loadmore() {
	      ++this.pageNumber;
	      this.getTreeLoadmore();
	    },
	    async getTreeLoadmore() {
	      let ref = this.bindRef.id; let resultData = ''; let treeData = [];
	      if (ref === 'dataStructure') {
	        resultData = await getDistributeDatasource({pageNumber: this.pageNumber, pageSize: this.pageSize, structured: true});
	        treeData = resultData.data.items.map(({id, name: label}) => {
	          return {id, label};
	        });
	      } else if (ref === 'dataUnstructure') {
	        resultData = await getDistributeDatasource({pageNumber: this.pageNumber, pageSize: this.pageSize, structured: false});
	        treeData = resultData.data.items.map(({id, name: label}) => {
	          return {id, label};
	        });
	      }
	      this.treeData[ref][0].children = this.treeData[ref][0].children.concat(treeData);
	
	      // 初次加載選定前十存儲與查詢數(shù)據(jù)
	      let storage = this.getStorageMethod(this.bindRef.id); let setChecked = [];
	      if (storage) {
	        setChecked = storage;
	      } else {
	        setChecked = treeData.map(({id}) => {
	          return id;
	        });
	      }
	      this.$nextTick(() => {
	        this.$refs[ref].setCheckedKeys(setChecked);
	      });
	      this.defaultCheckedKeys = setChecked;
	      // 數(shù)據(jù)加載完畢
	      if (this.treeData[ref][0].children.length >= resultData.data.total) {
	        this.complete = true;
	      }
	    },
	    // 取出當(dāng)前ref對應(yīng)緩存
	    getStorageMethod(ref) {
	      let paramObj = getStorage('distribute');
	      if (paramObj) {
	        if (ref === 'dataStructure' && paramObj.dataStructure) {
	          return paramObj.dataStructure;
	        } else if (ref === 'dataUnstructure' && paramObj.dataUnstructure) {
	          return paramObj.dataUnstructure;
	        }
	      }
	    },
	    // 勾選接口聚合
	    handleCheck(data, checked) {
	      let checkedNode = this.$refs[this.bindRef.id].getNode(data.id).checked;
	      let storage = this.getStorageMethod(this.bindRef.id);
	      if (storage) {
	        if (checkedNode) {
	          storage.push(data.id);
	        } else {
	          storage.splice(storage.findIndex(item => item === data.id), 1);
	        }
	      } else {
	        storage = checked.checkedKeys;
	      }
	      this.defaultCheckedKeys = storage;
	      this.$refs[this.bindRef.id].setCheckedKeys(storage);
	      this.$forceUpdate();
	      let storageFormal = getStorage('distribute');
	      storageFormal[this.bindRef.id] = storage;
	      setStorage('distribute', storageFormal);
	    },
	    // 節(jié)點展開
	    handleNodeExpand() {
	      this.collapse = true;
	    },
	    // 節(jié)點關(guān)閉
	    handleNodeCollapse() {
	      this.collapse = false;
	      // 剔除當(dāng)前節(jié)點所有子節(jié)點 過濾節(jié)點是關(guān)閉當(dāng)前節(jié)點且是其子級，則不予賦值
	      // this.defaultExpandKeys = this.defaultExpandKeys.filter((x) => (![data.id].some((item) => x === item) && !(x.indexOf(data.id) > -1)));
	    },
	    handleNodeClick(node) {
	      this.$emit('handleNodeClick', {id: node.id, label: node.label});
	    }
	}
</script>

2.當(dāng)前Tree樹，默認(rèn)是兩層結(jié)構(gòu)，所以不需要用到loadmore原生方法，這里直接拼接數(shù)據(jù)，查詢接口數(shù)據(jù)為第二層數(shù)據(jù)傳入，當(dāng)前，當(dāng)翻入到第二頁時，默認(rèn)第二頁未勾選，當(dāng)用戶進行勾選時不影響翻頁效果

 <div class="tree-load">
    <el-tree
      :ref="bindRef.id"
      class="treeDom"
      :data="treeData[bindRef.id]"
      default-expand-all
      show-checkbox
      node-key="id"
      :expand-on-click-node="false"
      :default-checked-keys="defaultCheckedKeys"
      :props="defaultProps"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
      @check="handleCheck"
    >
      <div slot-scope="{ node,data }" class="custom-tree-node">
        <el-tooltip
          class="item"
          effect="light"
          placement="right-start"
        >
          <div slot="content" >
            {{ node.label }}
          </div>
          <span v-if="data.id !=='loadmore'" class="span-tree-node">{{ node.label }}</span>
        </el-tooltip>
      </div>
    </el-tree>

    <el-link
      v-if="!complete && collapse"
      :underline="false"
      class="tree-more"
      @click="loadmore"
    >
      查看更多
    </el-link>
  </div>

vue el-tree樹的懶加載實現(xiàn)

樣式1：

首先加載第一層樹節(jié)點(要有加載第一層節(jié)點的接口才ok)

樣式2：

當(dāng)點擊第一層節(jié)點，或者其他層父節(jié)點的時候，加載其子節(jié)點，形成一個懶加載的效果。

代碼實現(xiàn)：

重要的是在tree中設(shè)置

:load=“l(fā)oadNode”

lazy

 <el-tree
              :data="treeData"
              node-key="id"
              :filter-node-method="filterNode"
              ref="indexTree"
              :props="treeDataDefaultProp"
              :expand-on-click-node="false"
              class="tree_Style"
              :load="loadNode"
              lazy
            >
            </el-tree>

created() {
    this.init();
  },
 methods: {
    // 初始化第一層樹
    init() {
      this.getTreeData();
    },
    // 得到第一層樹的列表
    async getTreeData() {
      const param = {
        type: Number(this.cateTabActive),
        keyword: this.keyword
        };
      const res = await this.$api.get('/api/category', param);
      if (res.code == 200) {
      // treeData 就是樹綁定的數(shù)據(jù)
        this.treeData = res.info;
      } else {
        return false;
      }
    },
     // 樹的懶加載
    loadNode(node, reslove) {
      let that = this;
      if (node.level === 0) {
        reslove(that.treeData);
      }
      if (node.level >= 1) {
        this.loadNodeChildren(node, reslove);
      }
    },
    // 樹的懶加載獲取子節(jié)點
    async loadNodeChildren(node, reslove) {
      let param = {
        categoryId: node.data.id,
        type: Number(this.cateTabActive)
      };
      const res = await this.$api.get('/api/category', param);
      let resArr = [];
      if (res.code === 200) {
        res.info.forEach(item => {
          item = JSON.parse(JSON.stringify(item));
          resArr.push({
            name: item.name,
            id: item.id,
            leaf: item.leaf,
            parentCategoryId: item.parentCategoryId,
            currentLevel: item.currentLevel,
            relateCount: item.relateCount
          });
        });
        // 將得到的孩子列表，塞進樹中
        this.$refs.indexTree.updateKeyChildren(node.data.id, resArr);
        return reslove(res.info);
      }
    },

以上就是“el-tree樹怎么設(shè)置懶加載及設(shè)置默認(rèn)勾選”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。