Praxis der mehrschichtigen verschachtelten Anzeige von Elementtabellen

<Vorlage>
  <div Klasse="App-Container">
    <div>
      <el-Tabelle
        :data="Tabellendaten"
        Stil="Breite: 100 %;Rand unten: 20px;"
        :span-method="arraySpanMethod"
        Zeilenschlüssel="id"
        Grenze
      >
        <el-table-column Typ="erweitern">
          <template slot-scope="Eigenschaften">
            <el-Tabelle
              Klasse="Tabelle-in-Tabelle"
              :show-header="falsch"
              :data="Eigenschaften.Zeile.Daten"
              Stil="Breite: 100%;"
              Zeilenschlüssel="id"
              :span-method="arraySpanMethod"
              Grenze
            >
              <el-table-column Typ="erweitern">
                <template slot-scope="Eigenschaften">
                  <el-Tabelle
                    Klasse="Tabelle-in-Tabelle"
                    :data="Eigenschaften.Zeile.Daten"
                    Stil="Breite: 100%;"
                    Zeilenschlüssel="id"
                    Grenze
                  >
                    <el-table-column prop="date" label="Bestelldatum" width="180"></el-table-column>
                    <el-table-column prop="type" label="Dokumenttyp" width="180"></el-table-column>
                    <el-table-column prop="status" label="status"></el-table-column>
                    <el-table-column label="Vorgang" width="120">
                      <template slot-scope="Eigenschaften">
                        <el-button type="text" size="small">Entfernen</el-button>
                      </Vorlage>
                    </el-Tabellenspalte>
                  </el-Tabelle>
                </Vorlage>
              </el-Tabellenspalte>
              <el-table-column prop="applyNo" label="Anwendungsnummer" width="132.2"></el-table-column>
              <el-table-column prop="name" label="Tabelle" width="180"></el-table-column>
              <el-table-column prop="address" label="Adresse"></el-table-column>
            </el-Tabelle>
          </Vorlage>
        </el-Tabellenspalte>
        <el-table-column prop="applyNo" label="Anwendungsnummer" width="180"></el-table-column>
        <el-table-column prop="name" label="Tabelle" width="180"></el-table-column>
        <el-table-column prop="address" label="Adresse"></el-table-column>
        <el-table-column label="Vorgang" width="120">
          <template slot-scope="Eigenschaften">
            <el-button type="text" size="small">Entfernen</el-button>
          </Vorlage>
        </el-Tabellenspalte>
      </el-Tabelle>
    </div>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Name: "name1",
  Komponenten: {},
  Daten() {
    zurückkehren {
      Tabellendaten: [
        {
          ID: 1,
          Bewerbungsnummer: "202004291234",
          Name: "Li Si",
          Adresse: „Nr. 1518, Jinshajiang Road, Bezirk Putuo, Shanghai“
        },
        {
          ID: 2,
          Bewerbungsnummer: "202004291235",
          Name: "Zhang San",
          Adresse: „Nr. 1517, Jinshajiang Road, Bezirk Putuo, Shanghai“
        },
        {
          ID: 3,
          Bewerbungsnummer: "202004291236,202004291237",
          Name: "Wang Wu",
          Adresse: „Nr. 1519, Jinshajiang Road, Bezirk Putuo, Shanghai“,
          Daten: [
            {
              Ich würde: 31,
              Bewerbungsnummer: "202004291236",
              Name: "Wang Wu",
              Adresse: „Nr. 1519, Jinshajiang Road, Bezirk Putuo, Shanghai“,
              Daten: [
                {
                  Ich würde: 31,
                  Datum: "2016-05-01",
                  Typ: "Typ 1",
                  Status: "versendet"
                },
                {
                  Ich würde: 32,
                  Datum: "2016-05-01",
                  Typ: „Typ 2“,
                  Status: „Nicht versendet“
                }
              ]
            },
            {
              Ich würde: 32,
              Bewerbungsnummer: "202004291237",
              Name: "Wang Wu",
              Adresse: „Nr. 1519, Jinshajiang Road, Bezirk Putuo, Shanghai“
            }
          ]
        },
        {
          ID: 4,
          Bewerbungsnummer: "202004291238",
          Name: „6 Zeichen“,
          Adresse: „Nr. 1516, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }
      ]
    };
  },
  Methoden: {
    arraySpanMethod({ Zeile, Spalte, Zeilenindex, Spaltenindex }) {
      wenn (!row.datas) {
        wenn (SpaltenIndex === 0) {
          Rückgabe [0, 0];
        } sonst wenn (SpaltenIndex === 1) {
          Rückkehr [1, 2];
        }
      }
    }
  }
};
</Skript>
<style lang="scss" scoped>
.app-container {
  ::v-tief {
    .el-table th {
      Hintergrund: #ddeeff;
    }
    .el-table__expanded-cell {
      Rahmen unten: 0px;
      Rand rechts: 0px;
      Polsterung: 0px 0px 0px 47px;
    }
  }
  .Tabelle-in-Tabelle {
    Rahmen oben: 0px;
  }
}
</Stil>