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
Detailed explanation of system input and output management in Linux
Management of input and output in the system 1. U...
Detailed tutorial on installing Hbase 2.3.5 on Vmware + Ubuntu18.04
Preface The previous article installed Hadoop, an...
Detailed explanation of how to use WeChat mini program map
This article example shares the specific implemen...
CSS solves the misalignment problem of inline-block
No more nonsense, post code HTML part <div cla...
Detailed explanation of setting resource cache in nginx
I have always wanted to learn about caching. Afte...
Web page header optimization suggestions
Logo optimization: 1.The logo image should be as ...
Install JDK8 in rpm mode on CentOS7
After CentOS 7 is successfully installed, OpenJDK...
Summary of CSS gradient effects (linear-gradient and radial-gradient)
Linear-gradient background-image: linear-gradient...
Common usage of regular expressions in Mysql
Common usage of Regexp in Mysql Fuzzy matching, c...
An example of how to implement an adaptive square using CSS
The traditional method is to write a square in a ...
Docker image access to local elasticsearch port operation
Using the image service deployed by docker stack,...
Detailed explanation of JavaScript function introduction
Table of contents Function Introduction function ...
Pay attention to the order of TRouBLe when writing shorthand properties in CSS (to avoid pitfalls)
Shorthand properties are used to assign values ...
Tips for making web table frames
<br />Tips for making web table frames. ----...
Tutorial on installing php5, uninstalling php, and installing php7 on centos
First, install PHP5 very simple yum install php T...