vue el-table实现递归嵌套的示例代码


Posted in Vue.js onAugust 14, 2022

说明: el-table有一个表格一级数据和二级数据显示的是一样的,像这种就可以用递归实现。
数据结构是这样子的:

tableData:[{
	name: "Lucy",
	age: 18,
	mobile: "11111111111",
	type: 1,
	friends:[{
		name: "Lucy-friend1",
		age: 16,
		mobile: "11111111111"
	},{
		name: "Lucy-friend2",
		age: 16,
		mobile: "11111111111"
	}]
}]

像以上这种数据结构想要如下图一样显示:

vue el-table实现递归嵌套的示例代码

我用的是el-table组件,所以单独建了一个组件用于表格递归显示。regionTableTemplate里expend中用到的递归显示二级数据
代码如下:

<template>
    <el-table :data="tableData" class="table-sub" ref="regionTable" :show-header="showHeader" :row-class-name="isShowExpend">
        <el-table-column type="expand">
            <template slot-scope="scope">
                <template v-if="scope.row.friends">
                    <regionTableTemplate class="in-table" :tableData="scope.row.friends" :showHeader="false"></regionTableTemplate>
                </template>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column label="操作" width="220">
            <template slot-scope="scope">
                <el-button type="text">详情</el-button>
                <el-button type="text"> 创建可用区</el-button>
                <el-button :disabled="scope.row.type === 1?true:false" type="text">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
export default {
    name: "regionTableTemplate",
    props:{
        tableData: Array,
        showHeader: Boolean
    },
    methods:{
        //展开行  用于没有friends数组即没有子数据
        isShowExpend(row, index) {
            if (row.row.friends&&row.row.friends) {
                return ''
            } else {
                return 'hide-expand'
            }
        }
    }
}
</script>

<style>

</style>

父组件调用

<template>
    <div id="ops-region-wrapper">
        <div class="ops-list-wrapper">
            <table-vue :tableData="tableData" :showHeader="true" @showRegionFlag="showRegionFlag" @showDelDialog="showDelDialog"></table-vue>
            <Pager :pages='pages' @changeCurrent='changeCurrent'></Pager>
        </div>
    </div>
</template>

<script>
import Pager from '@/components/Pager.vue';
import tableVue from './components/table.vue';
export default {
    components:{
        Pager,
        tableVue
    },
    data() {
        return {
            tableData: [{
				name: "Lucy",
				age: 18,
				mobile: "11111111111",
				type: 1,
				friends:[{
					name: "Lucy-friend1",
					age: 16,
					mobile: "11111111111"
				},{
					name: "Lucy-friend2",
					age: 16,
					mobile: "11111111111"
				}]
			}],
            pages: {//分页
                showItem: 15,
                total: 0,
                currentPage: 1
            },
        }
    },
    methods: {
        //分页
        changeCurrent(val) {
            this.pages.currentPage = val;
        }
    },
    mounted() {
        this.getList();
    }
}
</script>

<style lang="scss">
#ops-region-wrapper{
    .el-table {
        margin-top: 15px;
        tr .el-table__expanded-cell {
            padding: 0;
            border-bottom: none;
        }
        .el-table__expand-icon {
            width: 18px;
            height: 18px;
            line-height: 16px;
            background: rgba(54, 134, 255, 0.2);
            color: #3686ff;
            border: 1px solid #3686FF;
            box-sizing: border-box;
            border-radius: 50%;
            transform: scale(0.8);
            i {
                font-weight: bold;
                font-size: 12px;
                left: 48%;
            }
        }
        .el-table__expand-icon--expanded{
            transform: rotate(90deg) scale(0.8);
        }
        .hide-expand .el-table__expand-column>.cell {
            display: none;
        }
    }
    .in-table{
        &::before{
            border: none;
        }
        margin: 0;
        padding: 0;
        .el-table__expand-column>.cell,.el-table__expanded-cell {
            display: none;
        }
    }
    .el-button--text {
        margin: 0 20px 0 0;
        @include pageFont(12px, #006EFF, 400, "PingFangSC-Regular, PingFang SC", 17px);
        &.is-disabled{
            color: #979797;
        }
    }
    .is-click {
        cursor: pointer;
        text-decoration: underline;
        text-decoration-color: #3686FF;
        @include pageFont(12px, #3686FF, 400, "PingFangSC-Regular, PingFang SC", 17px);
    }
}
</style>

到此这篇关于vue el-table实现递归嵌套的示例代码的文章就介绍到这了,更多相关vue el-table递归嵌套内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue 实现上传组件
May 31 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 #Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 #Vue.js
Vue深入理解插槽slot的使用
Aug 05 #Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 #Vue.js
vue递归实现树形组件
Jul 15 #Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
Vue2项目中对百度地图的封装使用详解
You might like
PHP制作百度词典查词采集器
2015/01/29 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php简单统计在线人数的方法
2016/05/10 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
Django2.1.3 中间件使用详解
2018/11/26 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
数据库方面面试题
2012/04/22 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
开朗女孩的自我评价
2014/02/10 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
Java实现多文件上传功能
2021/06/30 Java/Android