今天小编给大家分享一下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>
样式1:
首先加载第一层树节点(要有加载第一层节点的接口才ok)
样式2:
当点击第一层节点,或者其他层父节点的时候,加载其子节点,形成一个懒加载的效果。
代码实现:
重要的是在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树怎么设置懒加载及设置默认勾选”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。