Practice of multi-layer nested display of element table
|
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
Recommend
Dockerfile echo specifies the method of implementing multiple lines of text in the specified file
Add multiple lines to the specified file in Docke...
Three Vue slots to solve parent-child component communication
Table of contents Preface Environment Preparation...
Why can't the MP4 format video embedded in HTML be played?
The following code is in my test.html. The video c...
How to deploy and start redis in docker
Deploy redis in docker First install Docker in Li...
Docker uses Git to implement the detailed process of Jenkins release and test projects
Table of contents 1. Install Docker 2. Create a c...
Solve the problem that changes to the Docker MySQL container database do not take effect
Using the official MySQL image requires some modi...
How to write asynchronous tasks in modern JavaScript
Preface In this article, we'll explore the ev...
Mysql5.7.14 Linux version password forgotten perfect solution
In the /etc/my.conf file, add the following line ...
MySQL 5.7.19 installation tutorial under Windows 10 How to change the root password of MySQL after forgetting it
Take MySQL 5.7.19 installation as an example, fir...
Basic learning and experience sharing of MySQL transactions
A transaction is a logical group of operations. E...
A brief discussion on the problem of forgotten mysql password and login error
If you forget your MySQL login password, the solu...
Three useful codes to make visitors remember your website
Three useful codes to help visitors remember your...
Implementation of single process control of Linux C background service program
introduce Usually a background server program mus...
Mysql SQL statement operation to add or modify primary key
Add table fields alter table table1 add transacto...
HTML markup language - form
Click here to return to the 123WORDPRESS.COM HTML ...