element table多层嵌套 element table多层嵌套显示的实践
lovlin_l 人气:0想了解element table多层嵌套显示的实践的相关内容吗，lovlin_l在本文为您仔细讲解element table多层嵌套的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：element,table多层嵌套,element多层嵌套表格，下面大家一起来学习吧。
有个需求是一个列表，里面包含多个单子，每个单子可以是唯一，也可以是多个合并之后的，而且每个单子下面显示的是另外一个表格，来上图
每行的操作还不一样，然后通过官网的一些例子总结了一下合并代码
<template>
<div class="app-container">
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
:span-method="arraySpanMethod"
row-key="id"
border
>
<el-table-column type="expand">
<template slot-scope="props">
<el-table
class="table-in-table"
:show-header="false"
:data="props.row.datas"
style="width: 100%;"
row-key="id"
:span-method="arraySpanMethod"
border
>
<el-table-column type="expand">
<template slot-scope="props">
<el-table
class="table-in-table"
:data="props.row.datas"
style="width: 100%;"
row-key="id"
border
>
<el-table-column prop="date" label="下单日期" width="180"></el-table-column>
<el-table-column prop="type" label="单据类型" width="180"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="props">
<el-button type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="applyNo" label="申请单号" width="132.2"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="applyNo" label="申请单号" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="props">
<el-button type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "name1",
components: {},
data() {
return {
tableData: [
{
id: 1,
applyNo: "202004291234",
name: "李四",
address: "上海市普陀区金沙江路 1518 弄"
},
{
id: 2,
applyNo: "202004291235",
name: "张三",
address: "上海市普陀区金沙江路 1517 弄"
},
{
id: 3,
applyNo: "202004291236,202004291237",
name: "王五",
address: "上海市普陀区金沙江路 1519 弄",
datas: [
{
id: 31,
applyNo: "202004291236",
name: "王五",
address: "上海市普陀区金沙江路 1519 弄",
datas: [
{
id: 31,
date: "2016-05-01",
type: "类型1",
status: "已发货"
},
{
id: 32,
date: "2016-05-01",
type: "类型2",
status: "未发货"
}
]
},
{
id: 32,
applyNo: "202004291237",
name: "王五",
address: "上海市普陀区金沙江路 1519 弄"
}
]
},
{
id: 4,
applyNo: "202004291238",
name: "赵6六",
address: "上海市普陀区金沙江路 1516 弄"
}
]
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (!row.datas) {
if (columnIndex === 0) {
return [0, 0];
} else if (columnIndex === 1) {
return [1, 2];
}
}
}
}
};
</script>
<style lang="scss" scoped>
.app-container {
::v-deep {
.el-table th {
background: #ddeeff;
}
.el-table__expanded-cell {
border-bottom: 0px;
border-right: 0px;
padding: 0px 0px 0px 47px;
}
}
.table-in-table {
border-top: 0px;
}
}
</style>
注：需要注意一点的是，这里面的孩子节点不能用children，因为官方默认是children，所以会出现别的下拉组件
设置td宽度的时候，需要注意的是里面跟外层的差47.8
加载全部内容