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
}
]
}
]
}