Practice of multi-layer nested display of element table

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:
  • Sample code for implementing multiple selection based on nested Table in ElementUI

<<:  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 ...

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...