vue el-table實(shí)現(xiàn)遞歸嵌套的示例代碼

更新時間：2022年08月14日 11:12:40 作者：Missxu1895

本文主要介紹了vue el-table實(shí)現(xiàn)遞歸嵌套的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

說明： el-table有一個表格一級數(shù)據(jù)和二級數(shù)據(jù)顯示的是一樣的，像這種就可以用遞歸實(shí)現(xiàn)。
數(shù)據(jù)結(jié)構(gòu)是這樣子的：

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

像以上這種數(shù)據(jù)結(jié)構(gòu)想要如下圖一樣顯示：

在這里插入圖片描述

我用的是el-table組件，所以單獨(dú)建了一個組件用于表格遞歸顯示。regionTableTemplate里expend中用到的遞歸顯示二級數(shù)據(jù)
代碼如下：

<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="手機(jī)號"></el-table-column>
        <el-table-column label="操作" width="220">
            <template slot-scope="scope">
                <el-button type="text">詳情</el-button>
                <el-button type="text"> 創(chuàng)建可用區(qū)</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數(shù)組即沒有子數(shù)據(jù)
        isShowExpend(row, index) {
            if (row.row.friends&&row.row.friends) {
                return ''
            } else {
                return 'hide-expand'
            }
        }
    }
}
</script>

<style>

</style>

父組件調(diào)用

<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>

到此這篇關(guān)于vue el-table實(shí)現(xiàn)遞歸嵌套的示例代碼的文章就介紹到這了,更多相關(guān)vue el-table遞歸嵌套內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: