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开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 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
基于PHPExcel的常用方法总结
2013/06/13 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
详解js异步文件加载器
2016/01/24 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python中二分查找法的实现方法
2020/12/06 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
中国电视购物:快乐购
2017/02/04 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
小学生成绩单评语
2014/12/31 职场文书
债务追讨律师函
2015/06/24 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers