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

这篇具有很好参考价值的文章主要介绍了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: 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.效果

el-table表单一键展开折叠,展开部分后一键全部展开或折叠,vue,vue.js,elementui,javascript

 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>

 文章到此结束,希望对你有所帮助~文章来源地址https://www.toymoban.com/news/detail-515900.html

到了这里,关于el-table表单一键展开折叠,展开部分后一键全部展开或折叠的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包