element-ui tree全部展开和全部折叠

node-key="id"很重要

<template><div class="hello"><h2>Essential Links</h2><el-tree:data="data":props="{ label: 'label' }"highlight-currentdefault-expand-allref="selectTree":expand-on-click-node="false"node-key="id"></el-tree><el-button @click="collapseAll2(data)">全部折叠</el-button><el-button @click="unFoldAll2(data)">全部展开</el-button></div>
</template><script>
export default {name: "HelloWorld",data() {return {props: {label: "name",children: "zones",},data: [{id: 1,label: "一级 1",children: [{id: 4,label: "二级 1-1",children: [{id: 9,label: "三级 1-1-1",},{id: 10,label: "三级 1-1-2",},],},],},{id: 2,label: "一级 2",children: [{id: 5,label: "二级 2-1",},{id: 6,label: "二级 2-2",},],},{id: 3,label: "一级 3",children: [{id: 7,label: "二级 3-1",},{id: 8,label: "二级 3-2",},],},],count: 1,res: [],};},methods: {handleCheckChange(data, checked, indeterminate) {console.log(data, checked, indeterminate);},handleNodeClick(data) {console.log(data);},// 全部展开unFoldAll2(data) {let self = this;data.forEach((el) => {self.$refs.selectTree.store.nodesMap[el.id].expanded = true;el.children && el.children.length > 0? self.unFoldAll2(el.children): ""; // 子级递归});},// 全部折叠collapseAll2(data) {let self = this;data.forEach((el) => {self.$refs.selectTree.store.nodesMap[el.id].expanded = false;el.children && el.children.length > 0? self.collapseAll2(el.children): ""; // 子级递归});}}
};
</script>

demo下载

element-ui tree全部展开和全部折叠相关推荐

Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
修改element ui tree 搜索功能，实现分级搜索，关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...
element ui 菜单右侧展开_Elementui Vue 菜单固定展开的问题
父组件 :default-active="activeMenu" class="el-menu-vertical-demo" background-color= ...
element ui tree结构双击单机右键事件
<el-tree:data="data":props="defaultProps"@node-click="handleNodeClick&qu ...
element ui tree左侧选中，右侧渲染，右侧删除单个标签，左侧对应标签不选中
效果如下图所示: 代码: //左侧引入elementUI tree <el-treeref="tree"node-key="id":expand-on-c ...
element ui tree增删改查_clientgo连接K8s集群进行pod的增删改查
背景最近在看client-go源码最基础的部分,client-go的四类客户端,RestClient.ClientSet.DynamicClient.DiscoveryClient.其中RestCl ...
基于element ui的收起展开检索条件效果
<el-button type="text" style="margin-left:600px;color: #8cc5ff;text-decoration: un ...
element ui tree树节点数据平面化
有时候需要对树节点进行增删改查,因此需要快速找到要操作的这个节点.将label,children格式的数据平面化处理后,可以根据id等唯一标识字段快速定位节点,随后对其操作. 数据平面化操作: fun ...
vue结合Element UI如何实现点击左侧菜单的折叠与展开
一.Element UI 中菜单的折叠与展开在Element UI中的官方文档中,在NavMenu 导航菜单中,在Menu Attribute 中,有一个 collapse 属性.它的作用是是否水平 ...
element tree 如何全部展开、全部折叠
element tree 如何全部展开.全部折叠一.全部展开只需要将每个父节点的 id 放到 defaultExpendKeys 数组中即可 <el-treeclass="tree ...

element-ui tree全部展开和全部折叠

node-key="id"很重要

element-ui tree全部展开和全部折叠相关推荐

最新文章

热门文章