Set lazy loading and default tick for El tree

1. load tree Tree time , It is required to be able to lazy load by clicking to view more , And you can check the check box to get data , Because there are many interfaces Tree Trees , So name multiple ref Values are passed into the subcomponent Tree Inside the tree

 <DsmasTreeLoadMore
 ref="dataStructure"
   :show-checkbox="true"
   :bind-ref="{label: ' Structured data ',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: ' Structured data ',
				        id: 'dataStructure',
				        children: [],
				        disabled: true
				      }
				    ],
				      dataUnstructure: [
				      {
    
				        label: ' Unstructured data ',
				        id: 'dataUnstructure',
				        children: [],
				        disabled: true
				      }
				    ],
				    collapse:false
				}
			},
	  created() {
    
	    this.getTreeLoadmore();
	  },
	  methods: {
    
	    //  See more buttons 
	    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);
	
	      //  First load the selected top ten storage and query data 
	      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;
	      //  Data loaded 
	      if (this.treeData[ref][0].children.length >= resultData.data.total) {
    
	        this.complete = true;
	      }
	    },
	    //  Take out the current ref Corresponding cache 
	    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;
	        }
	      }
	    },
	    //  Check interface aggregation 
	    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);
	    },
	    //  Node expansion 
	    handleNodeExpand() {
    
	      this.collapse = true;
	    },
	    //  Node shutdown 
	    handleNodeCollapse() {
    
	      this.collapse = false;
	      //  Eliminate all child nodes of the current node   The filter node closes the current node and is its child , Then no assignment will be made 
	      // 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. At present Tree Trees , The default is a two-tier structure , So there's no need to use loadmore A native method , Here, the data is directly spliced , The query interface data is transferred into the second layer data , At present , When turning to the second page , By default, the second page is not checked , When the user checks, the page turning effect will not be affected

 <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" style="max-width: 300px;">
            {
    {
     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"
    >
       To view more 
    </el-link>
  </div>