Element-Beispielcode zum Implementieren dynamischer Tabellen

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Datum" 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-Tabelle>

<Vorlage>
  <!-- Dynamische Anzeigetabelle -->
  <el-table :data="tableData" Rahmenstreifen :height="Höhe" @row-click="handleRowClick">
    <!-- v-for-Schleife zum Abrufen der Header-Daten -->
    <template v-for="Element im Tabellenheader">
      <table-column v-if="item.children && item.children.length" :key="item.id" :column-header="item" />
      <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center" />
    </Vorlage>
  </el-Tabelle>
</Vorlage>

<Skript>
  importiere TableColumn aus '@/components/Table/TableColumn'
 
  Standard exportieren {
    Name: "DynamischeTabelle",
    Komponenten:
      Tabellenspalte
    },
    Requisiten: {
      // Tabellendaten tableData: {
        Typ: Array,
        erforderlich: true
      },
      // Mehrstufige Tabellenkopfdaten tableHeader: {
        Typ: Array,
        erforderlich: true
      },
      // Die Höhe der Tabelle: {
        Typ: Zeichenfolge,
        Standard: „300“
      }
    },
    Methoden: {
      // Zeilenklickereignis handleRowClick (Zeile, Spalte, Ereignis) {
        // konsole.log(Zeile)
        // console.log(Spalte)
        // console.log(Ereignis)
        // Benachrichtigen Sie die übergeordnete Komponente über das Zeilenklickereignis. // Zeile wird als Parameter übergeben. this.$emit('row-click', row)
      }
    }
  }
</Skript>

<Vorlage>
  <el-table-column
    :label="Spaltenüberschrift.label"
    :prop="Spaltenüberschrift.label"
    ausrichten="zentrieren"
  >
    <!--columnHeader entspricht: column-header-->
    <template v-for="Element in Spaltenüberschrift.Kinder">
      <Tabellenspalte
        v-if="Artikel.Kinder && Artikel.Kinder.Länge"
        :Schlüssel="Artikel-ID"
        :Spaltenüberschrift="Element"
      />
      <el-table-column
        v-sonst
        :Schlüssel="Artikelname"
        :label="Artikel.label"
        :prop="Artikel.prop"
        ausrichten="zentrieren"
      />
    </Vorlage>
  </el-Tabellenspalte>
</Vorlage>
 
<Skript>
  Standard exportieren {
    Name: 'Tabellenspalte',
    Requisiten: {
      Spaltenüberschrift: {
        Typ: Objekt,
        erforderlich: true
      }
    }
  }
</Skript>
 
<Stilbereich>
 
</Stil>

<Vorlage>
  <div Klasse="Demo">
    <el-Karte>
      <!--Abfragebereich-->
      <el-row :gutter="10">
        <el-col :span="6">
          <div Klasse="Rasterinhalt bg-lila">
            <span style="margin-right: 10px">Auswahlfeld -</span>
            <el-Auswahl
              v-Modell="angegebene_Tabelle"
              Platzhalter="Bitte auswählen"
            >
              <el-Option
                v-for="Element in Optionen"
                :Schlüssel="Artikel.zb_code"
                :label="Artikel.zb_name"
                :Wert="Artikel.zb_code"
              />
            </el-Auswahl>
          </div>
        </el-col>
        <el-col :span="6">
          <div Klasse="Rasterinhalt bg-lila">
            <el-button type="primary" plain @click="handleQueryClick">Abfrage</el-button>
          </div>
        </el-col>
      </el-row>
      <!--Tabellenbereich-->
      <dynamische-tabelle
        v-if="dynamischeTabellenanzeige"
        :table-data="Tabellendaten"
        :table-header="Tabellenüberschriften"
        :Höhe="'550px'"
      />
    </el-Karte>
  </div>
</Vorlage>

<Skript>
  //Komponenten importieren importiere DynamicTable aus '@/components/Table/DynamicTable'
  // Tabellenkopfzeileninformationen abrufen import { getTableHeader02_1, getTableHeader02_2, getTableHeader02_3, getTableHeader02_4 } von '@/api/table-header'
 
  Standard exportieren {
    Name: 'Index',
    Komponenten: { // Komponentenregistrierung DynamicTable
    },
    Daten () {
      zurückkehren {
        // -- Abfrage ----------------------
        Optionen: [
          // { zb_name: 'Indikatorname', zb_code: 'Indikatorcode' }
        ],
        angegebene_Tabelle: '', // Indexwert// -- Tabelle---------------------
        dynamicTableShow: true, // DynamicTable-Komponente rendert Variablen neu // Tabellenkopfdaten tableHeaders: [],
        // Tabellendaten tableData: []
      }
    },
    erstellt () {
      // API - Holen Sie sich die Dropdown-Box-Daten des Indikators getSpecifiedTable().then(res => {
        diese.Optionen = res.data
      })
    },
    Methoden: {
      //Überprüfen, ob der Wert im Array ist isExistArr (arr, val) {
        gibt arr.includes(Wert) zurück
      },
      // Tabelle neu rendern refreshTable (zb_code) {
        // Labelwert entsprechend dem Wert abrufen const obj = this.options.find((item) => {
          Rückgabewert: item.zb_code === zb_code
        })
        Konsole.log(zb_code)
        console.log(Objekt.zb_name)
        // Setzen Sie dynamicTableShow auf false, damit die DynamicTable-Komponente dies erneut rendert. dynamicTableShow = false
        // Verschiedene Tabellenüberschriften entsprechend den verschiedenen Indikatoren rendern const TBArr01 = ['M01', 'M02', 'M03', 'M05'] // Tabelle Kategorie 1 const TBArr02 = ['M04', 'M07', 'M08', 'M12'] // Tabelle Kategorie 2 const TBArr03 = ['M09', 'M10', 'M11'] // Tabelle Kategorie 3 const TBArr04 = ['M06'] // Tabelle Kategorie 4 if (this.isExistArr(TBArr01, zb_code)) {
          this.tableHeaders = getTableHeader02_1(obj.zb_name) // Rendern des Header-Stils 1
        }
        wenn (dies.isExistArr(TBArr02, zb_code)) {
          this.tableHeaders = getTableHeader02_2(obj.zb_name) // Rendern von Header-Stil 2
        }
        wenn (this.isExistArr(TBArr03, zb_code)) {
          this.tableHeaders = getTableHeader02_3(obj.zb_name) // Rendern von Header-Stil 3
        }
        wenn (this.isExistArr(TBArr04, zb_code)) {
          this.tableHeaders = getTableHeader02_4(obj.zb_name) // Rendern von Header-Stil 4
        }
        // API - Tabellendaten abrufengetTableList02(zb_code).then(res => {
          diese.tableData = res.data
        })
        // Das DOM wurde noch nicht aktualisiert, der Code hier wird benötigt this.$nextTick(() => {
          // DOM ist jetzt aktualisiert this.dynamicTableShow = true
        })
      },
      // Klick [Abfrage] Ereignis handleQueryClick () {
        const zb_code = diese.angegebene_Tabelle
        // Überprüfen Sie, dass die Abfragebedingung nicht leer sein kann, wenn (zb_code === '' || zb_code === undefined) {
          this.$message.warning('Der Indikator darf nicht leer sein!')
        } anders {
          konsole.log('zb_code: ' + zb_code)
          // Kopfzeile und Tabelle neu rendern this.refreshTable(zb_code)
        }
      }
    }
  }
</Skript>

dies.$nextTick(() => {
    // DOM ist jetzt aktualisiert this.dynamicTableShow = true
})

<el-table-column Typ="index" Breite="50"></el-table-column>

<el-table-column v-if="isIndex" type="index" width="100" label="Seriennummer" align="center" />

 Requisiten: {
      // Tabellendaten tableData: {
        Typ: Array,
        erforderlich: true
      },
      // Mehrstufige Tabellenkopfdaten tableHeader: {
        Typ: Array,
        erforderlich: true
      },
      // Die Höhe der Tabelle: {
        Typ: Zeichenfolge,
        Standard: „300“
      },
      // Müssen Sie eine Spalte mit Seriennummern hinzufügen? isIndex: {
        Typ: Boolean
      }
}

 <dynamische-tabelle
        v-if="dynamischeTabellenanzeige"
        :table-data="Tabellendaten"
        :table-header="Tabellenüberschriften"
        :Höhe="'550px'"
        :ist-index="wahr"
/>

<dynamische-tabelle
        v-if="dynamischeTabellenanzeige"
        :table-data="Tabellendaten"
        :table-header="Tabellenüberschriften"
        :Höhe="'550px'"
        :is-index="istIndex hinzufügen"
/>

 this.isAddIndex = true