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 tags 创建缓存导航的过程实现
Dec 03 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
关于Vue中的options选项
Mar 22 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生成excel文件的简单方法
2014/02/08 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
golang与PHP输出excel示例
2016/07/22 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
索趣科技的答案
2007/02/07 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python中shell执行知识点
2020/05/06 Python
python变量的作用域是什么
2020/05/26 Python
Django实现随机图形验证码的示例
2020/10/15 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
捐赠仪式主持词
2014/03/19 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android