Verwenden Sie die Renderfunktion, um hoch skalierbare Komponenten zu kapseln

<FormTable :data="lessonPackageArr" :fleldsInfo="lessonPackageInfo" :maxColumn="3" label-width="120px">
  <template #presentedHours="{ data }">
    <div Klasse="Flex-Box zwischen">
      <span>
        {{ data.presentedHours }}
      </span>
      <span class="column-btn" @click="editPresentedHours(data)">Bearbeiten</span>
    </div>
  </Vorlage>
  <template #gifts="{ data }">
    <div Klasse="Flex-Box zwischen">
      <span>
        {{ data.gifts }}
      </span>
      <span class="column-btn" @click="editPresentedHours(data)">Bearbeiten</span>
    </div>
  </Vorlage>
</FormTable>

// Ein Objekt, das zum Konfigurieren der Titelspalte und der entsprechenden Felder der Titelspalte verwendet wird // Typ gibt den Typ des Wertes an. Jetzt legt die Komponente intern fest, welche Arten von Werten angezeigt werden können // Für Dienste gibt es 1 0 zurück. Wenn eine Zahl angezeigt werden muss, geben Sie map_data an, um // Spaltenattributeinstellungen spaltenübergreifend zuzuordnen // Sie müssen den Anzeigeinhalt anpassen, um einen Slot bereitzustellen
Lektionspaketinfo: {
    orderType: { type: 'option', desc: 'Kurspaketkategorie', map_data: { 1: 'Erste Bestellung', 2: 'Verlängerung', 5: 'Kostenloser Kurs' } },
    Combo: { Typ: 'Text', Beschreibung: 'Paketname' },
    presentedHours: { type: 'text', desc: 'Freie Unterrichtsstunden', slot: true },
    Preis: { Typ: 'Text', Beschreibung: 'Standardpreis' },
    Geschenke: { Typ: 'Text', Beschreibung: 'Geschenk', Spalte: 3, Steckplatz: true },
  }

<Vorlage>
  <div v-if="tableData.length" Klasse="form-table">
    <div v-for="(Daten, _) in Tabellendaten" :Schlüssel="_" Klasse="Tabellenborder">
      <el-row v-for="(Zeile, Index) in Zeilen" :key="Index">
        <el-col v-for="(Feld, Schlüssel) in Zeile" :key="Schlüssel" :span="getSpan(Feld.Spalte)">
          <div v-if="(field.disabled && data[key]) || !field.disabled" class="Spalteninhalt Flex-Box zwischen">
            <div Klasse="Beschriftung" :style="'Breite:' + Beschriftungsbreite">
              <span v-if="Feld.erforderlich" Klasse="erforderlich">*</span>
              {{ feld.desc }}
            </div>
            <div Klasse="Text Flex-Element" :title="Daten[Schlüssel]">
              <template v-if="Schlüssel === 'Mindestalter'">
                <span>{{ Daten[Schlüssel] }}</span>
                -
                <span>{{ Daten['maxAge'] }}</span>
              </Vorlage>
              <template v-else-if="Schlüssel === 'status'">
                <template v-if="Feld.statusList">
                  <span v-if="data[key] == 0" :class="field.statusList[2]">{{ field.map_data[data[key]] }}</span>
                  <span v-else-if="Daten[Schlüssel] == 10 || Daten[Schlüssel] == 34" :class="Feld.statusList[1]">
                    {{ field.map_data[data[key]] }}
                  </span>
                  <span v-else :class="field.statusList[0]">{{ field.map_data[data[key]] }}</span>
                </Vorlage>
                <span v-else>{{ Feld.map_data[Daten[Schlüssel]] }}</span>
              </Vorlage>

              <slot v-else :name="Schlüssel" v-bind:data="Daten">
                <Tabellenspalteninhalt
                  :dataType="Feld.Typ"
                  :metaData="Daten[Schlüssel]"
                  :mapData="Feld.map_data"
                  :text="Feld.text"
                />
              </slot>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <div v-else class="form-table empty">Keine Daten</div>
</Vorlage>

<Skript>
  importiere TableColContent aus '@/components/TableColContent'
  Standard exportieren {
    Name: "FormTable",
    Komponenten:
      Tabellenspalteninhalt,
    },
    Requisiten: {
      // Daten: {
        erforderlich: wahr,
        Typ: [Objekt, Array, null],
      },
      // Feldinformationen fieldsInfo: {
        erforderlich: wahr,
        Typ: Objekt,
        // Klassenname: { Typ: "Text", Beschreibung: "Klassenname", Spalte: 3 },
      },
      // Maximale Anzahl anzuzeigender Spalten maxColumn: {
        erforderlich: false,
        Typ: Nummer,
        Standard: 2,
      },
      Beschriftungsbreite: {
        erforderlich: false,
        Typ: Zeichenfolge,
        Standard: '90px',
      },
    },
    Daten() {
      zurückkehren {}
    },
    berechnet: {
      Tabellendaten() {
        wenn (!diese.daten) {
          zurückkehren []
        }
        wenn (diese.Dateninstanzdes Arrays) {
          gib diese Daten zurück
        } anders {
          returniere [diese.Daten]
        }
      },
      Zeilen() {
        const returnArray = []
        sei total = 0
        lass Artikel = {}
        für (const key in this.fleldsInfo) {
          const nextTotal = total + this.fleldsInfo[Schlüssel].Spalte || 1
          wenn (nächstesTotal > diese.maxColumn) {
            returnArray.push(Element)
            Artikel = {}
            Gesamt = 0
          }
          Gesamt += this.fieldsInfo[Schlüssel].Spalte || 1
          item[Schlüssel] = this.fieldsInfo[Schlüssel]
          wenn (Gesamt === diese.maxColumn) {
            returnArray.push(Element)
            Artikel = {}
            Gesamt = 0
          }
        }
        wenn (gesamt) {
          returnArray.push(Element)
        }
        Rückgabewert returnArray
      },
    },
    Methoden: {
      getSpan(Spalte) {
        wenn (!Spalte) {
          Spalte = 1
        }
        Spalte zurückgeben * (24 / this.maxColumn)
      },
    },
  }
</Skript>

<span v-else-if="Datentyp === 'Bild' || Datentyp === 'Cropper'" :class="Klassenname">
  <el-popover placement="rechts" title="" trigger="hover">
    <img :src="metaData" style="max-width: 600px;" />
    <img slot="Referenz" :src="Metadaten" :alt="Metadaten" width="44" class="Spaltenbild" />
  </el-popover>
</span>

<Vorlage>
  <ZmFormTable :titleList="Titelliste" :data="Daten" />
</Vorlage>
<Skript>
  Standard exportieren {
    Name: 'Test',
    Daten() {
      zurückkehren {
        data: {}, // Titelliste vom Server abrufen: [
          { Titel: 'Name', Eigenschaft: 'Name', Spanne: 3 },
          {
            Titel: 'Classroom Works',
            Eigenschaft: (h, Daten) => {
              const img =
                (Daten.Arbeitsbild && (
                  <ElBild
                    Stil = 'Breite: 100px; Höhe: 100px;'
                    src={data.workPic}
                    Vorschau-Quellenliste={[data.workPic]}
                  ></ElImage>
                )) ||
                ''
              Bild zurückgeben
            },
            Spanne: 3,
          },
          { title: 'Arbeitskommentare', prop: 'workComment', span: 3 },
        ],
      }
    },
  }
</Skript>

 <Vorlage>
  <div Klasse="Formulartabelle">
    <ul v-if="Titelliste.Länge">
      <!-- titleInfo ist die transformierte Titelliste-->
      <li
        v-for="(Element, Index) in Titelinfo"
        :Schlüssel="Index"
        :style="{ width: ((item.span || 1) / titleNumPreRow) * 100 + '%' }"
      >
        <div Klasse = "form-table-title" :style = "`Breite: ${titleWidth}px;`">
          <Container v-if="Typ von item.title === 'Funktion'" :renderContainer="item.title" :data="Daten" />
          <span v-else>
            {{ item.title }}
          </span>
        </div>
        <div class="form-table-key" :style="`width:calc(100% - ${titleWidth}px);`">
          <Container v-if="Typ von item.prop === 'Funktion'" :renderContainer="item.prop" :data="Daten" />
          <span v-else>
            {{ ![null, void 0].includes(data[item.prop] && data[item.prop]) || '' }}
          </span>
        </div>
      </li>
    </ul>
    <div v-else class="form-table-no-data">Keine Daten</div>
  </div>
</Vorlage>

<Skript>
  Container aus „./container.js“ importieren
  Standard exportieren {
    Name: "FormTable",
    Komponenten:
      Container,
    },
    Requisiten: {
      Titelbreite: {
        Typ: Nummer,
        Standard: 120,
      },
      TitelAnzahlVorZeile: {
        Typ: Nummer,
        Standard: 3,
        Validator: Wert => {
          const validate = [1, 2, 3, 4, 5, 6].includes(Wert)
          wenn (!validieren) {
            console.error('titleNumPreRow gibt an, dass eine Zeile ein Titelfeldpaar hat, das nur eine gerade Zahl zwischen 1 und 6 sein kann, der Standardwert ist 3')
          }
          zurückgeben validieren
        },
      },
      Titelliste: {
        Typ: Array,
        Standard: () => {
          zurückkehren []
        },
        Validator: Wert => {
          const validate = Wert.jedes(Element => {
            const { Titel, Eigenschaft } = Artikel
            Titel und Eigenschaft zurückgeben
          })
          wenn (!validieren) {
            console.log('Das Element des übergebenen titleList-Attributs muss die Attribute title und prop enthalten.')
          }
          zurückgeben validieren
        },
      },
      Daten: {
        Typ: Objekt,
        Standard: () => {
          zurückkehren {}
        },
      },
    },
  }
</Skript>
<!-- Stil ist nicht kritisch, wird weggelassen-->

Standard exportieren {
  Name: 'Container',
  funktional: wahr,
  rendern(h, { Eigenschaften }) {
    returniere props.renderContainer(h, props.data)
  },
}