el-table表单一键展开折叠，展开部分后一键全部展开或折叠

实现功能：

1.表单一键展开或者一键折叠

2.表单点击展开一部分后，再次点击展开或折叠按钮可以全部展开或全部折叠

3.完整代码在最后

1.建立el-table的树形结构

1.ref="table"，用节点绑定的方式实现

2.data：树形结构数据

3.:tree-props="{ children: 'child', hasChildren: 'hasChildren' }"，中的children就是自动判断data中有没有叫child的子结构，如果有就填充

4.row-key="id"，唯一值，必须要

5.stripe,斑马纹的表格

2.data数据

基本树结构就完成了

            listData: [
                {
                    id: 1,
                    name: '张三',
                    age: 20,
                    child: [
                        { id: 11, name: '子行1', age: 5 },
                        { id: 12, name: '子行2', age: 8 }
                    ]
                },
                {
                    id: 2,
                    name: '李四',
                    age: 25,
                    child: [
                        { id: 4, name: '子行1', age: 5 },
                        { id: 5, name: '子行2', age: 8 }
                    ]
                },
                {
                    id: 3,
                    name: '王五',
                    age: 30,
                    child: [
                        { id: 6, name: '子行1', age: 5 },
                        { id: 7, name: '子行2', age: 8 }
                    ]
                },
                {
                    id: 5,
                    name: '翠花',
                    age: 30
                }
            ],

3.添加俩个按钮，展开和折叠

toggleRowExpansion：用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（第一个参数为 true 则展开）

使用递归的方式进行展开折叠操作

一键展开
折叠

           isOpen: false
 openTable(str) {
            if (str == 'open') {
                this.isOpen = true;
            } else {
                this.isOpen = false;
            }
            this.$nextTick(() => {
                this.handleArr(this.listData, this.isOpen);
            });
        },
        handleArr(arr, flag) {
            arr.forEach(i => {
                this.$refs.table.toggleRowExpansion(i, flag);
                if (i.children) {
                    this.handleArr(i.children);
                }
            });
        }

4.效果

 5.完整代码（优化版）

 文章到此结束，希望对你有所帮助~