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
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);//展开/折叠全部-数据处理}); }},}});
完整代码
<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>
接口数据
{"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}]}]
}