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,斑马纹的表格

1.  
   <el-table ref="table" :data="listData" :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" row-key="id" stripe>
2.  
   <el-table-column prop="name"></el-table-column>
3.  
   </el-table>

2.data数据

基本树结构就完成了

1.  
   listData: [
2.  
   {
3.  
   id: 1,
4.  
   name: '张三',
5.  
   age: 20,
6.  
   child: [
7.  
   { id: 11, name: '子行1', age: 5 },
8.  
   { id: 12, name: '子行2', age: 8 }
9.  
   ]
10.  
    },
11.  
    {
12.  
    id: 2,
13.  
    name: '李四',
14.  
    age: 25,
15.  
    child: [
16.  
    { id: 4, name: '子行1', age: 5 },
17.  
    { id: 5, name: '子行2', age: 8 }
18.  
    ]
19.  
    },
20.  
    {
21.  
    id: 3,
22.  
    name: '王五',
23.  
    age: 30,
24.  
    child: [
25.  
    { id: 6, name: '子行1', age: 5 },
26.  
    { id: 7, name: '子行2', age: 8 }
27.  
    ]
28.  
    },
29.  
    {
30.  
    id: 5,
31.  
    name: '翠花',
32.  
    age: 30
33.  
    }
34.  
    ],

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

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

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

1.  
   <el-button size="mini" @click.native="openTable('open')">一键展开</el-button>
2.  
   <el-button size="mini" @click.native="openTable('fold')">折叠</el-button>

1.  
   isOpen: false
2.  
   openTable(str) {
3.  
   if (str == 'open') {
4.  
   this.isOpen = true;
5.  
   } else {
6.  
   this.isOpen = false;
7.  
   }
8.  
   this.$nextTick(() => {
9.  
   this.handleArr(this.listData, this.isOpen);
10.  
    });
11.  
    },
12.  
    handleArr(arr, flag) {
13.  
    arr.forEach(i => {
14.  
    this.$refs.table.toggleRowExpansion(i, flag);
15.  
    if (i.children) {
16.  
    this.handleArr(i.children);
17.  
    }
18.  
    });
19.  
    }

4.效果

 5.完整代码

1.  
   <template>
2.  
   <div class="content-box">
3.  
   <div class="container">
4.  
   <p>主体页面 2 - 3</p>
5.  
   <el-button size="mini" @click.native="openTable('open')">一键展开</el-button>
6.  
   <el-button size="mini" @click.native="openTable('fold')">折叠</el-button>
7.  
    
8.  
   <el-table ref="table" :data="listData" :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" row-key="id" stripe>
9.  
   <el-table-column prop="name"></el-table-column>
10.  
    </el-table>
11.  
    </div>
12.  
    </div>
13.  
    </template>
14.  
     
15.  
    <script>
16.  
    export default {
17.  
    data() {
18.  
    return {
19.  
    listData: [
20.  
    {
21.  
    id: 1,
22.  
    name: '张三',
23.  
    age: 20,
24.  
    child: [
25.  
    { id: 11, name: '子行1', age: 5 },
26.  
    { id: 12, name: '子行2', age: 8 }
27.  
    ]
28.  
    },
29.  
    {
30.  
    id: 2,
31.  
    name: '李四',
32.  
    age: 25,
33.  
    child: [
34.  
    { id: 4, name: '子行1', age: 5 },
35.  
    { id: 5, name: '子行2', age: 8 }
36.  
    ]
37.  
    },
38.  
    {
39.  
    id: 3,
40.  
    name: '王五',
41.  
    age: 30,
42.  
    child: [
43.  
    { id: 6, name: '子行1', age: 5 },
44.  
    { id: 7, name: '子行2', age: 8 }
45.  
    ]
46.  
    },
47.  
    {
48.  
    id: 5,
49.  
    name: '翠花',
50.  
    age: 30
51.  
    }
52.  
    ],
53.  
    isOpen: false
54.  
    };
55.  
    },
56.  
    methods: {
57.  
    openTable(str) {
58.  
    if (str == 'open') {
59.  
    this.isOpen = true;
60.  
    } else {
61.  
    this.isOpen = false;
62.  
    }
63.  
    this.$nextTick(() => {
64.  
    this.handleArr(this.listData, this.isOpen);
65.  
    });
66.  
    },
67.  
    handleArr(arr, flag) {
68.  
    arr.forEach(i => {
69.  
    this.$refs.table.toggleRowExpansion(i, flag);
70.  
    if (i.children) {
71.  
    this.handleArr(i.children);
72.  
    }
73.  
    });
74.  
    }
75.  
    }
76.  
    };
77.  
    </script>
78.  
     
79.  
    <style lang="scss">
80.  
    .customize-carousel .el-carousel__item h3 {
81.  
    color: #475669;
82.  
    font-size: 16px;
83.  
    line-height: 150px;
84.  
    margin: 0 50%;
85.  
    }
86.  
    .customize-carousel .el-carousel__item:nth-child(2n) {
87.  
    background-color: #99a9bf;
88.  
    }
89.  
    .customize-carousel .el-carousel__item:nth-child(2n 1) {
90.  
    background-color: #d3dce6;
91.  
    }
92.  
    </style>

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

这篇好文章是转载于：学新通技术网