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遞歸嵌套內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 動態實現element ui的el-table某列數據不同樣式的示例
- 關於el-table表格組件中插槽scope.row的使用方式
- Vue業務組件封裝Table表格示例詳解
- vue+elementui實現動態添加行/可編輯的table
- vue中的slot-scope及scope.row用法