怎么控制Element的数据树形表格展开所有行;递归操作,打造万能数据表格折叠。

HTML

html 复制代码
<el-button type="success" size="small" @click="expandStatusFun"> 
	<span v-show="expandStatus==false"><i class="el-icon-folder-opened"></i>展开全部</span>
	<span v-show="expandStatus==true"><i class="el-icon-folder"></i>折叠全部</span>
</el-button>

<el-table 
class="mt-30" 
:data="tableList" 
border 
style="width: 100%" 
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
:default-expand-all="expandStatus" 
ref="el_Table">
</el-table>

JS

javascript 复制代码
 var app = new Vue({
        el: '#app',
        data() {
            return {
			 tableList: [],
			 expandStatus:true,
			  }
        },
		methods:{
		//展开/折叠全部-状态
            expandStatusFun(){ 
                var that=this;
                that.expandStatus=!that.expandStatus;   
                 //一级的展开和折叠
                 that.tableList.forEach(function(item){ 
                    that.expandDataFun(item,that.expandStatus);//展开/折叠全部-数据处理
                }); 
            },
            //展开/折叠全部-逐行数据处理
            expandDataFun(row_item,status)
            {
                var that=this;
                that.$refs.el_Table.toggleRowExpansion(row_item,status); 
                if(row_item.children != undefined && row_item.children != null)
                {
                     //使用递归遍历每一级
                     row_item.children.forEach(function(item){ 
                        that.expandDataFun(item,status);//展开/折叠全部-数据处理
                        }); 
                }
                
            },
		}
		
		});

完整代码

html 复制代码
<el-button type="success" size="small" @click="expandStatusFun"> 
	<span v-show="expandStatus==false"><i class="el-icon-folder-opened"></i>展开全部</span>
	<span v-show="expandStatus==true"><i class="el-icon-folder"></i>折叠全部</span>
</el-button>

<el-table 
class="mt-30" 
:data="tableList" 
border 
style="width: 100%" 
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" 
:default-expand-all="expandStatus" 
ref="el_Table">
</el-table>
<script>
 var app = new Vue({
        el: '#app',
        data() {
            return {
			 tableList: [],
			 expandStatus:true,
			  }
        },
		methods:{
		//展开/折叠全部-状态
            expandStatusFun(){ 
                var that=this;
                that.expandStatus=!that.expandStatus;   
                 //一级的展开和折叠
                 that.tableList.forEach(function(item){ 
                    that.expandDataFun(item,that.expandStatus);//展开/折叠全部-数据处理
                }); 
            },
            //展开/折叠全部-逐行数据处理
            expandDataFun(row_item,status)
            {
                var that=this;
                that.$refs.el_Table.toggleRowExpansion(row_item,status); 
                if(row_item.children != undefined && row_item.children != null)
                {
                     //使用递归遍历每一级
                     row_item.children.forEach(function(item){ 
                        that.expandDataFun(item,status);//展开/折叠全部-数据处理
                        }); 
                }
                
            },
		}
		
		});
</script>

接口数据

javascript 复制代码
{
    "code": "10000",
    "msg": "数据加载成功!",
    "total": 7,
    "data": [ 
        {
            "id": "72",
            "reid": "0",
            "typename": "站点栏目",
            "code": "",
            "orderNumber": "0",
            "idPath": "",
            "ishidden": true,
            "children": [
                {
                    "id": "75",
                    "reid": "72",
                    "typename": "平台资讯",
                    "code": "",
                    "orderNumber": "99",
                    "idPath": "72",
                    "ishidden": true,
                    "children": [
                        {
                            "id": "76",
                            "reid": "75",
                            "typename": "新闻资讯",
                            "code": "",
                            "orderNumber": "99",
                            "idPath": "72,75",
                            "ishidden": true,
                            "children": null
                        },
                        {
                            "id": "77",
                            "reid": "75",
                            "typename": "行业资讯",
                            "code": "",
                            "orderNumber": "99",
                            "idPath": "72,75",
                            "ishidden": true,
                            "children": null
                        }
                    ]
                },
                {
                    "id": "78",
                    "reid": "72",
                    "typename": "关于我们",
                    "code": "",
                    "orderNumber": "99",
                    "idPath": "72",
                    "ishidden": true,
                    "children": null
                }
            ]
        }
    ]
}
相关推荐
To_OC8 小时前
LC 207 课程表:刚学图论那会儿,我连这是拓扑排序都没看出来
javascript·算法·leetcode
To_OC8 小时前
LC 208 实现 Trie 前缀树:曾被名字劝退,写完发现是送分题
javascript·算法·leetcode
天渺工作室9 小时前
实现一个adblock/adblock plus等浏览器广告拦截器检测插件
前端·javascript
阳光是sunny9 小时前
Vue 项目怎么做用户行为全链路监控?轻量插件方案详解
前端·面试·架构
ZhengEnCi9 小时前
Q04-Vite禁用CSS代码分割-解决生产环境样式加载顺序混乱问题
前端·vue.js·vite
九酒10 小时前
AI Agent 开发踩坑记:口播功能非得用 APP 原生实现吗?
前端·人工智能·agent
Jackson__10 小时前
做了一段时间的AI coding后,我终于搞清了 CLI 和 MCP 的区别
前端·agent·ai编程
IT_陈寒13 小时前
JavaScript项目实战经验分享
前端·人工智能·后端
用户479492835691514 小时前
6w star,GitHub 趋势第一的 Ponytail,这个agent插件到底在火什么
前端·后端
薛定喵的谔15 小时前
我开源了一个精致的 Next.js 博客模板:Skyplume
前端·前端框架·next.js