There is a requirement for a list containing multiple orders. Each order can be unique or multiple orders can be merged. Another table is displayed under each order. See the picture above. The operation of each line is different, and then the merge code is summarized through some examples on the official website <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="Order date" width="180"></el-table-column> <el-table-column prop="type" label="Document type" width="180"></el-table-column> <el-table-column prop="status" label="status"></el-table-column> <el-table-column label="operation" width="120"> <template slot-scope="props"> <el-button type="text" size="small">Remove</el-button> </template> </el-table-column> </el-table> </template> </el-table-column> <el-table-column prop="applyNo" label="Application No." width="132.2"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </template> </el-table-column> <el-table-column prop="applyNo" label="Application No." width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> <el-table-column label="operation" width="120"> <template slot-scope="props"> <el-button type="text" size="small">Remove</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: "Li Si", address: "No. 1518, Jinshajiang Road, Putuo District, Shanghai" }, { id: 2, applyNo: "202004291235", name: "Zhang San", address: "No. 1517, Jinshajiang Road, Putuo District, Shanghai" }, { id: 3, applyNo: "202004291236,202004291237", name: "Wang Wu", address: "No. 1519, Jinshajiang Road, Putuo District, Shanghai", datas: [ { id: 31, applyNo: "202004291236", name: "Wang Wu", address: "No. 1519, Jinshajiang Road, Putuo District, Shanghai", datas: [ { id: 31, date: "2016-05-01", type: "Type 1", status: "shipped" }, { id: 32, date: "2016-05-01", type: "Type 2", status: "Not shipped" } ] }, { id: 32, applyNo: "202004291237", name: "Wang Wu", address: "No. 1519, Jinshajiang Road, Putuo District, Shanghai" } ] }, { id: 4, applyNo: "202004291238", name: "赵6六", address: "No. 1516, Jinshajiang Road, Putuo District, Shanghai" } ] }; }, 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> Note: One thing to note is that the child node here cannot use children , because the official default is children, so when other drop-down components set the td width, it should be noted that the difference between the inner and outer layers is 47.8 This is the end of this article about the practice of multi-layer nested display of element table. For more relevant content about multi-layer nested element table, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Implementation of deploying Apollo configuration center using docker in CentOS7
>>: Use of MySQL query rewrite plugin
Table of contents Preface Quick Review: JavaScrip...
1. getBoundingClientRect() Analysis The getBoundi...
As the platform continues to grow, the project...
Table of contents Basic Introduction Getting Star...
Follow the steps below 1. request.js content: htt...
When the front-end and back-end interact, sometim...
MySQL database too many connections This error ob...
MySQL database reports ERROR 1045 (28000): Access...
Table of contents 1 The role of Apache 2 Apache I...
<template> <div class="app-containe...
This article records the method of sharing files ...
Table of contents 1. unzip command 1.1 Syntax 1.2...
The SSH mentioned here is called Security Shell. ...
Why mention textarea specifically? Because the tex...
The before/after pseudo-class is equivalent to in...