怎么控制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
                }
            ]
        }
    ]
}