温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

el-tree树怎么设置懒加载及设置默认勾选

发布时间:2023-05-05 15:50:31 来源:亿速云 阅读:287 作者:iii 栏目:开发技术

今天小编给大家分享一下el-tree树怎么设置懒加载及设置默认勾选的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

el-tree树设置懒加载以及设置默认勾选

当需要对element-ui组件懒加载进行拓展功能,如添加查看更多或者其他图标进行加载,可使用下面的方法进行调整使用

1.加载tree树时,要求能够通过点击查看更多进行懒加载,且可进行勾选复选框获取数据,由于界面存在多个Tree树,故命名多个ref值传递进来子组件Tree树内

 <DsmasTreeLoadMore
 ref="dataStructure"
   :show-checkbox="true"
   :bind-ref="{label: '结构化数据',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: '结构化数据',
				        id: 'dataStructure',
				        children: [],
				        disabled: true
				      }
				    ],
				      dataUnstructure: [
				      {
				        label: '非结构化数据',
				        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);
	
	      // 初次加载选定前十存储与查询数据
	      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;
	      // 数据加载完毕
	      if (this.treeData[ref][0].children.length >= resultData.data.total) {
	        this.complete = true;
	      }
	    },
	    // 取出当前ref对应缓存
	    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);
	    },
	    // 节点展开
	    handleNodeExpand() {
	      this.collapse = true;
	    },
	    // 节点关闭
	    handleNodeCollapse() {
	      this.collapse = false;
	      // 剔除当前节点所有子节点 过滤节点是关闭当前节点且是其子级,则不予赋值
	      // 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.当前Tree树,默认是两层结构,所以不需要用到loadmore原生方法,这里直接拼接数据,查询接口数据为第二层数据传入,当前,当翻入到第二页时,默认第二页未勾选,当用户进行勾选时不影响翻页效果

 <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树的懒加载实现

样式1:

首先加载第一层树节点(要有加载第一层节点的接口才ok)

el-tree树怎么设置懒加载及设置默认勾选

样式2:

当点击第一层节点,或者其他层父节点的时候,加载其子节点,形成一个懒加载的效果。

el-tree树怎么设置懒加载及设置默认勾选

代码实现:

重要的是在tree中设置

:load=“loadNode”

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 就是树绑定的数据
        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);
      }
    },
    // 树的懒加载获取子节点
    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树怎么设置懒加载及设置默认勾选”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI