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

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

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 则展开）

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

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

           isOpen: falseopenTable(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.完整代码

<template><div class="content-box"><div class="container"><p>主体页面 2 - 3</p><el-button size="mini" @click.native="openTable('open')">一键展开</el-button><el-button size="mini" @click.native="openTable('fold')">折叠</el-button><el-table ref="table" :data="listData" :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" row-key="id" stripe><el-table-column prop="name"></el-table-column></el-table></div></div>
</template><script>
export default {data() {return {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}],isOpen: false};},methods: {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);}});}}
};
</script><style lang="scss">
.customize-carousel .el-carousel__item h3 {color: #475669;font-size: 16px;line-height: 150px;margin: 0 50%;
}
.customize-carousel .el-carousel__item:nth-child(2n) {background-color: #99a9bf;
}
.customize-carousel .el-carousel__item:nth-child(2n + 1) {background-color: #d3dce6;
}
</style>

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

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

Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
HTML table表单colspan和rowspan行列使用方法
HTML中的table表单元素colspan和rowspan表示表格跨行或者跨列,colspan和rowspan用于将行或者列合并,码笔记分享 table表单colspan和rowspan详细用法: ...
ajax核心代码提交,ajax表单在Asp.net核心提交后的RedirectToAction
我有一个名为Index的视图和一个名为'_Addbook'的PartialView,它显示为引导模式.在partialView中使用ajax表单将数据插入到数据库中.ajax表单在Asp.net核心提 ...
Html利用函数输入学生的性别,JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)...
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证) 发布时间:2020-10-08 04:15:08 来源:脚本之家阅读:73 作者:水山奇问题:表单怎么在输入后 ...
JSP简单练习-EL获取表单数据
输入用户名和密码的界面: <%@ page language="java" contentType="text/html;charset=gb2312" ...
序列化table表单
对序列化表单稍微做一个小结.序列化表单值的结果是输出以数组形式.serializeArray() 方法通过序列化表单值来创建对象数组(名称和值),返回 JSON 数据结构数据.此方法返回的是 JSON ...
php table表单下载,GitHub - Zerolone/auto: 用php生成表格、表单 phh create form table
auto form 用php生成表格.表单 php create form grid 想要实现的效果通过php生成html表单表格 info use php to create form grid ...
form 表单字段 autocomplete 设置为off 后仍然无效的解决方法
autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为"o ...
html表单记住密码按钮,js form表单提交，浏览器记住密码后自动填充
1.场景描述用form表单实现的页面搜索,第一次搜索点击提交之后手机浏览器会提示保存用户名和密码,点了保存之后,再次进入这个页面这些值会直接在页面上,将input的值删除之后,点击搜索提交之后这些值 ...
HTML 去调table表单里面td之间的间距
首先为大家展示一下最原始的代码和效果.直接在table中用td划分的表格会默认隐藏边框. 接下来我们用css来增加样式,为table增加边框. table { border: 1px solid #8 ...