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

news2024/12/23 22:32:19

实现功能:

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/698406.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis系列--数据过期清除策略缓存淘汰策略

一、过期策略 一、前言 Redis 所有的数据结构都可以设置过期时间&#xff0c;时间一到&#xff0c;就会自动删除。可以想象里面有一个专门删除过期数据的线程&#xff0c;数据已过期就立马删除。这个时候可以思考一下&#xff0c;会不会因为同一时间太多的 key 过期&#xff0…

windows电脑设置每天自动关机

有时候我们需要我们的笔记本或者电脑在每天固定的时间自动关机&#xff0c;但是windows本身是没有带这个设置的&#xff0c;下面记录下如何设置电脑每天自动关机&#xff0c;无需安装任何第三方软件&#xff1b; 文章目录 一、设置自动关机程序二、取消自动关机三、Windows任务…

chatgpt赋能python:Python连接表

Python连接表 Python作为一种高级编程语言&#xff0c;可以用于各种各样的任务。其中之一就是连接表格数据。连接表是在数据管理中非常重要的概念&#xff0c;因为它可以将不同表格中的数据合并在一起&#xff0c;从而使我们能够更好地分析和理解数据。在这篇文章中&#xff0…

蓝桥杯专题-试题版含答案-【猜算式】【排列序数】【还款计算】【滑动解锁】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

探索Gradio的CheckboxGroup模块:交互式多选框组件

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

详解金融机构敏捷营销落地:体系架构、关键技术和实施方法

本文根据 2023 年金融营销科技价值发现论坛中&#xff0c;神策数据金融首席架构师王仕的主题演讲整理所得&#xff0c;聚焦营销 5.0 理念下的敏捷营销&#xff0c;详细讲解金融机构落地时涉及到的体系架构、关键技术及实施方法。 根据国家发改委官网披露的数据&#xff0c;2022…

macOS编译AirMap开源全景图源码image-processing

1.克隆源码 git clone --recursive https://github.com/airmap/image-processing.git 2. 使用CLion打开CMakeLists.txt并做为工程打开 2.默认配置名为Default,可修改,下面的所有配置项都可改 3.点击OK后会自动生成

青翼自研--4通道DAC播放子卡产品数据手册

FMC131是一款4通道3GSPS采样率或者2通道6GSPS采样率16位DA播放FMC子卡模块&#xff0c;该板卡为FMC标准&#xff0c;符合VITA57.4规范&#xff0c;可以作为一个理想的IO模块耦合至FPGA前端&#xff0c;16通道的JESD204B接口通过FMC连接器连接至FPGA的高速串行端口GTH。插值模式…

突破性5G NTN技术,美格智能携手高通发布卫星物联网连接方案

通信技术的快速发展&#xff0c;使得万物互联成为现实&#xff0c;物联网深刻影响我们的生活方式。目前&#xff0c;全球物联网连接主要由WiFi、蓝牙和蜂窝网络等几类技术支撑。数据显示&#xff0c;蜂窝基站的陆地覆盖率约为20%&#xff0c;而海洋覆盖率则不到5%。 这意味着陆…

十大编程算法

算法一&#xff1a;快速排序算法 快速排序是由东尼霍尔所发展的一种排序算法。在平均状况下&#xff0c;排序 n 个项目要Ο(n log n)次比较。在最坏状况下则需要Ο(n2)次比较&#xff0c;但这种状况并不常见。事实上&#xff0c;快速排序通常明显比其他Ο(n log n) 算法更快&a…

uni-app/vue 文字转语音朗读(附小程序语音识别和朗读)

语音播报的实现的方法有很多种&#xff0c;我这里介绍集中不引用百度、阿里或者迅飞的API的实现方式。 一、采用new SpeechSynthesisUtterance的方式 废话不多说直接上代码 data() {return {utterThis:null,} },//方法使用this.utterThis new SpeechSynthesisUtterance(); …

地下水管三维可视化综合管控平台提升政府服务质量

随着当前互联网技术数据的快速发展和增长&#xff0c;总数越来越大&#xff0c;结构越来越复杂。如果你想更清楚、更快地理解和理解数据&#xff0c;传统的二维平面图数据图性能不能满足需求。 什么是三维可视化? 三维可视化是一种利用计算机技术&#xff0c;再现三维世界中的…

命令模式(Command)

别名 动作&#xff08;Action&#xff09;事务&#xff08;Transaction&#xff09; 定义 命令是一种行为设计模式&#xff0c;它可将请求转换为一个包含与请求相关的所有信息的独立对象。该转换让你能根据不同的请求将方法参数化、延迟请求执行或将其放入队列中&#xff0c…

(1)深度学习学习笔记-数据操作和处理

文章目录 前言一、张量操作二、csv文件数据操作数据预处理(读入csv文件作为pytorch能处理的) 来源 前言 张量的一些处理和操作 csv文件数据操作 一、张量操作 [&#xff1a;&#xff0c;1]表示全部行 第二列 [&#xff1a;]是全取 [1:3,1&#xff1a;]&#xff1a;1:3表示1~3的…

Node.js搭建Https服务

要搭建一个接收HTTPS请求的Node.js服务器,可以按以下步骤操作: 1. 初始化项目和安装依赖: bashnpm init -y npm install expresslatest npm install httpslatest 2. 生成证书文件: 这里按照自己的需求 去买ssl证书 或者获取免费证书 直接百度 阿里云获取免费证书等关键词即可…

Prefix-Tuning 阅读笔记

《Prefix-Tuning: Optimizing Continuous Prompts for Generation》 核心思想&#xff1a; 微调的时候&#xff0c;把预训练好的大transformer固定住不训练&#xff0c;在大transformer前面拼接几个token的参数&#xff0c;只训练前面这几个token的参数。 为什么有效 因为虽…

金融科技领先者Broadridge选择CloudBees CI来加速软件交付

Broadridge公司是全球金融科技领先者&#xff0c;通过丰富客户参与度、控制风险、优化效率和创造收入增长的解决方案为客户推动业务转型。 借助CloudBees CI&#xff0c;Broadridge为所有使用Jenkins的开发团队提供了集中管理和自助服务的体验。Broadridge能够不断为客户提供新…

vue 中node-sass和sass版本问题解决

先开始使用 “node-sass”: “^7.0.1” “sass-loader”: “^10.0.5” 然后使用npm install报错 后面百度&#xff0c;搜到了是因为 node-sass和sass-loader版本不对应造成。 然后修改版本&#xff0c;增加sass引用 “node-sass”: “^7.0.1” “sass-loader”: “^7.3.1”, “…

Mysql实现按月份查询挂号统计数据(聚合函数的使用)

最近公司要实现一个通过年月来查询每个月的挂号统计&#xff08;当日挂号&#xff0c;预约挂号&#xff09;&#xff0c;因为医院每个月都要来问我们这边一次&#xff0c;每次都去数据库查询太麻烦了&#xff0c;所以就需要开发一个查询挂号统计的接口。 前面用了很多种方法,要…

计算机中的逻辑运算(与、或、非、异或、同或、与非、或非)

计算机中的逻辑运算又被称作为“布尔运算”&#xff0c;分别为&#xff1a;与、或&#xff0c;非&#xff0c;异或。此外在门电路中还有&#xff1a;同或、与非、或非。共七种。 这七种逻辑运算中&#xff0c;只有 逻辑非运算 是一元逻辑运算&#xff08;一个运算操作数&#…