赞
踩
代码实现如下:
- <template>
- <div>
- <el-button @click="handleCheckedTreeExpand">展开/折叠</el-button>
- <el-tree
- class="tree-border"
- :data="data"
- show-checkbox
- default-expand-all
- ref="tree"
- node-key="id"
- empty-text="加载中,请稍候"
- :props="defaultProps"
- ></el-tree>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- // 展开状态
- isExpandAll: false,
- defaultProps: {
- children: "children",
- label: "label"
- },
- data: [{
- label: '一级 1',
- id: 1,
- children: [{
- id: 11,
- label: '二级 1-1',
- children: [{
- id: 111,
- label: '三级 1-1-1'
- }]
- }]
- }, {
- id: 2,
- label: '一级 2',
- children: [{
- id: 21,
- label: '二级 2-1',
- children: [{
- id: 211,
- label: '三级 2-1-1'
- }]
- }, {
- id: 22,
- label: '二级 2-2',
- children: [{
- id: 221,
- label: '三级 2-2-1'
- }]
- }]
- }, {
- id: 3,
- label: '一级 3',
- children: [{
- id: 31,
- label: '二级 3-1',
- children: [{
- id: 311,
- label: '三级 3-1-1'
- }]
- }, {
- id: 32,
- label: '二级 3-2',
- children: [{
- id: 321,
- label: '三级 3-2-1'
- }]
- }]
- }],
- }
- },
- methods: {
- // 展开/折叠事件
- handleCheckedTreeExpand(){
- this.isExpandAll = !this.isExpandAll
- let treeRef = this.$refs.tree
- let treeList = this.data
- this.TreeExpandOrFold(treeList, treeRef)
- },
- // 递归展开/折叠 树
- TreeExpandOrFold(treeList, treeRef){
- treeList.forEach((item,index)=>{
- treeRef.store.nodesMap[treeList[index].id].expanded = this.isExpandAll;
- if(item.children && item.children.length>0){
- let newTreeRef = treeRef.store.nodesMap[treeList[index].id]
- this.TreeExpandOrFold(item.children, newTreeRef)
- }
- })
- }
- }
- }
- </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。