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

说明: 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"
	}]
}]

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

我用的是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递归嵌套内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • el-table嵌套el-popover处理卡顿的解决

    目录 罪魁祸首 解决方法 罪魁祸首 一个常见的场景是在表格行内以el-popover的形式对行内信息进行一些业务操作.在表格分页10条.20条的情况下页面运行良好,但是在分页400条的时候会出现肉眼可见的卡顿.原因是表格渲染的popover组件太多了,一行如果至少3个popover组件,那么400行至少就得渲染1200个了.下面就是导致卡顿的通常写法: <el-table-column label="操作"> <template #default="{ ro

  • element的el-form和el-table嵌套使用实现

    目录 一.element的el-form和el-table嵌套使用 二.应用实例 一.element的el-form和el-table嵌套使用 要点: :model="addJsonForm" 给表单绑定数据,addJsonForm 是传入表单的数据对象 注意表单数据对象 addJsonForm 的定义:属性 params (可按需求命名)为表单内嵌套的表格的显示数据,数组类型: 属性 addJsonRules ,为表单绑定的验证规则. el-table: 采用自定义列模板,可自定义表

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

    说明: el-table有一个表格一级数据和二级数据显示的是一样的,像这种就可以用递归实现.数据结构是这样子的: tableData:[{ name: "Lucy", age: 18, mobile: "11111111111", type: 1, friends:[{ name: "Lucy-friend1", age: 16, mobile: "11111111111" },{ name: "Lucy-frien

  • vue父子组件的嵌套的示例代码

    本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t

  • 使用Vue调取接口,并渲染数据的示例代码

    刚接触vue.js框架的时候,很伤脑筋.今天整理一下post/get两种方式,简单的调取数据库数据,并进行渲染,希望帮助大家! 首先,在HTML页面引入: //引入vue.js文件 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 引入vue-resource.min.js文件,就可以引入接口方法了 <script src="https://cdn.st

  • vue 2.0 购物车小球抛物线的示例代码

    本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi

  • FastApi+Vue+LayUI实现前后端分离的示例代码

    目录 前言 项目设计 后端 前端 运行项目 Q&A 前言 在前面的Api开发中,我们使用FastApi已经可以很好的实现.但是实际使用中,我们通常建议前后端项目分离.今天我们就使用FastApi+Vue+LayUI做一个前后端分离的Demo. 项目设计 后端 后端我们采用FastApi在新的test视图中,定义一个路由,并将其注册到app中,并且在test视图中定义一个接口,实现模拟从数据库读取数据供前端调用渲染. 代码 test.py from fastapi import FastAPI,D

  • vue组件中使用iframe元素的示例代码

    本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g

  • Vue+mui实现图片的本地缓存示例代码

    下面一段代码给大家分享基于Vue+mui实现图片的本地缓存,具体代码如下所示: const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_product: function (state, products) { //商品列表 state.products = products; for(let i = 0; i < state.products.l

  • vue+element 实现商城主题开发的示例代码

    本文介绍了vue+element 实现商城主题开发的示例代码,分享给大家,具体如下: <template> <div> <div class="set-phone"> <el-form :model="theme" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item lab

  • Vue实现仿iPhone悬浮球的示例代码

    悬浮球插件简单的效果图: 很遗憾,没找到太好的视频转gif的软件,压缩出来的大小超过了限制,就不放图了 可以参考其他人的图,效果一致: 简单实用案例: <!-- 给定一个初始位置position,插槽中填写想滑动的部分 --> <xuanfuqiu :position="position"> <d-add-button @click="addPigFarm" add-item="猪场"></d-add-b

  • Vue的props父传子的示例代码

    废话不多少,父传子做一个比喻 首页想加一个图片,但又不想每次都用img而且又让img做css和动画事件.此时最简单的方法做一个页面封装,然后起一个名字让首页自己获取,放一个地址就行!其他什么都不用管. 步骤如下: 第一步:创建一个组件,相当于创意文件夹,专门存小东西以后经常用 <template> <div> <img src="./xxx.xx" alt=""> </div> </template> &l

随机推荐