vue el-table实现递归嵌套的示例代码
作者：Missxu1895
本文主要介绍了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递归嵌套内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！