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 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue使用watch监听属性变化
Apr 30 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利用header跳转失效的解决方法
2014/10/24 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
对pandas中Series的map函数详解
2018/07/25 Python
django中的图片验证码功能
2019/09/18 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
村干部承诺书
2014/03/28 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
《绝招》教学反思
2016/02/20 职场文书