element el-tree折叠收缩的实现示例
更新时间:2022年08月18日 11:07:39 作者:微笑的鱼_
本文主要介绍了element el-tree折叠收缩的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
原理:通过el-tree 的 elTree.store.nodesMap
获取所有树节点,设置所有节点的 expanded
属性,使用该方法时特别注意el-tree必须设置node-key="id"
,作为每个树节点唯一标志,否则使用elTree.store.nodesMap
获取所有节点返回是空
效果图
template代码
<h3> <span>el-tree折叠收缩 </span> <el-tooltip class="item" effect="dark" :content="treeBtn.iconTip" placement="top"> <svg-icon :icon-class="treeBtn.iconClass" @click="toggleEltree"></svg-icon> </el-tooltip> </h3> <el-row> <el-col :span="3"> <el-tree ref="elTree" :data="data" :props="defaultProps" node-key="id" :default-expand-all="expandNode"> </el-tree> </el-col> </el-row>
script代码
export default { data() { return { treeBtn: { iconClass: 'fullscreen', iconTip: '展开' }, expandNode: false, defaultProps: { children: 'children', label: 'label' }, data: [ { label: '一级 1', id: 98543, children: [{ label: '二级 1-1', id: 98343, children: [{ label: '三级 1-1-1', id: 98043, }] }] }, { label: '一级 2', id: 98545, children: [{ label: '二级 2-1', id: 45545, children: [{ label: '三级 2-1-1', id: 44456, }] }] } ] }, methods: { toggleEltree() { this.expandNode = !this.expandNode if(this.expandNode) { this.treeBtn.iconClass = 'exit-fullscreen' this.treeBtn.iconTip = '收缩' } else { this.treeBtn.iconClass = 'fullscreen' this.treeBtn.iconTip = '展开' } let allNodes = this.$refs.elTree.store.nodesMap; for (let x in allNodes) { allNodes[x].expanded = this.expandNode; } } } }
此外elTree.store. _getAllNodes()
亦可获取所有树节点,该方法返回一个数组
到此这篇关于element el-tree折叠收缩的实现示例的文章就介绍到这了,更多相关element el-tree折叠收缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章
Vue3中使用defineCustomElement 定义组件详解
这篇文章主要为大家介绍了Vue3中使用defineCustomElement 定义组件详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10Vue中使用vue-count-to(数字滚动插件)详细教程
这篇文章主要给大家介绍了关于Vue中使用vue-count-to(数字滚动插件)的相关资料,最近需要开发一个数字滚动效果,在网上找到一个关于vue-countTo的插件,觉得这个插件还不错,需要的朋友可以参考下2023-09-09
最新评论