您现在的位置是：网站首页> 编程资料编程资料

如何隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)_vue.js_

2023-05-24 328人已围观

简介如何隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)_vue.js_

1.首先按照官网

拷贝tree树组件代码，设置完show-checkbox，图中查看更多为叶子节点，且设置数据节点属性为disabled

{{ node.label }} {{ node.label }}  {{ node.label }} 
{{ node.label }}

css样式如下：

::v-deep .span-tree-node { width: 120px; position: absolute; text-overflow: ellipsis; overflow: hidden; color: #696969; top: 50%; transform: translateY(-50%); } ::v-deep .treeDom { width: 100%; overflow-x: auto; .custom-tree-node { width: 100% !important; position: relative; }

2.由于属性是isleaf

所以lazy状态下叶子节点不会有加载目录符号，但此时，有个禁用复选框，现在只需要对它设置样式即可

::v-deep .el-tree .el-tree-node:last-child { .el-tree-node__content .is-leaf +.el-checkbox.is-disabled{ display: none; } .el-tree-node__content.is-not-clickable{ cursor: pointer; } }

3. 分页懒加载实现功能也比较简单

可以复写tree树自带的load方法，load方法内携带两个返回参数，一个是node，一个是resolve，即懒加载数据必须是通过resolve就是return 将数据带回

 async lazyLoadMore(node, resolve, parentNode = []) { let id = node?.data?.id, pre = node?.data?.name, data = [], arrId = ''; if (node.level === 0) { id = this.paramNode.parent; return resolve([{id: id, name: id, leaf: false}]); } if (node.level === 1) { pre = ''; } // 节点各自的resolve this.funcResolve.push({id: id, resolve: resolve}); this.funcResolve = this.funcResolve.filter((item, index, self)=>{ return self.findIndex(x=>x.id === item.id) === index; }); // 判断获取分页查询的pre参数 if (id && id.indexOf('/') > -1) { let arrIndex = id.lastIndexOf('/') + 1; arrId = id.substring(arrIndex); if (arrId === pre) pre = ''; } // lazy加载查询接口 const { data: {items} } = await getInterfaceTreeDictory({parent: id || '', pre: pre || ''}); data = items.map(({interface_url: name, full_interface_url: id}) => { return {name, id}; }); // 翻页信息添加 if (data.length >= this.pageSize) { let nearName = data[data.length - 1].name; data.push({name: '查看更多', id: 'loadmore', nearName: nearName, leaf: true, disabled: true}); } // 查看更多加载需根据各自的resolve加载数组数据 if (parentNode && parentNode.length > 0) { parentNode.push(...data); return resolve(parentNode); } else { return resolve(data); } }, // 查看更多事件点击 loadMoreNode(node, data) { if (data.id === 'loadmore') { let nodeParentKey = node.parent.key ? node.parent.key : this.paramNode.parent; let childNode = { data: { id: nodeParentKey, name: data.nearName } }, resolve = ''; let parentNode = node.parent.childNodes.map(({key: id, label: name})=>{ return { name, id }; }); console.log(parentNode); // 剔除自定义查看更多option数据 if (parentNode.length > 0) { parentNode = parentNode.slice(0, -1); } // 选取resolve返回 if (parentNode.length <= this.pageSize) { resolve = this.funcResolve.filter((item)=>{ return item.id === nodeParentKey; }); // 调用原生Tree load方法 this.$refs.treeRef.load(childNode, resolve[0].resolve, parentNode); } } },

代码内有一点需要注意，即每次查询接口的时候，和后台约定的规则是：不包含分页，需要传值两个参数，一个是parent，即当前节点的上一级所有层级拼接，另一个是pre即当前节点的子集，若第一次加载，pre可为空，若查看更多再一次加载pre为上一次加载数据data的最后一个元素id，作为传参；

eg：