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: