Vollständiger Schrittbericht zur Vue-Kapselung allgemeiner Tabellenkomponenten

<!-- pro-table.vue -->
<Vorlage>
  <div>
    <el-Tabelle
      :data="Tabellendaten"
      Stil="Breite: 100%"
      :stripe="Tabellentitel.stripe"
      :border="Tabellentitel.border"
      :fit="Tabellentitel.fit"
      :highlight-current-row="Tabellentitel.highlightCurrentRow"
      @selection-change="handleSelectionChange">
      <!--Erste Spalte der Tabelle-->
      <el-table-column
        :Typ="ersteTabellenspalte.Typ"
        :width="ersteTabellenspalte.width"
        v-if="ersteTabellenspalte.select"
      >
      </el-Tabellenspalte>
      <!--Andere Spalten in der Tabelle-->
      <el-table-column v-for="(Wert,Index) in tableCol" :Schlüssel="Index"
                       :prop="Wert.prop"
                       :label="Wert.label"
                       :width="Wert.Breite || 180">
        <template slot-scope="Umfang">
          <Vorlage v-if="!Wert.render">
            <template v-if="Wert.formatter">
              {{ wert.formatter(scope.row, wert) }}
            </Vorlage>
            <template v-else-if="Wert.getImgurl">
              <el-image :src="Wert.getImgurl(scope.row, Wert)" style="Breite: 70px; Höhe: 70px"
                        :preview-src-list="Wert.previewSrcList ? Wert.previewSrcList(Umfang.Zeile, Wert) : Wert.getImgurl(Umfang.Zeile, Wert).split(',')"/>
            </Vorlage>
            <Vorlage v-else>
              {{ Umfang.row[Wert.prop] }}
            </Vorlage>
          </Vorlage>
          <!--Erweitertes DOM-->
          <Vorlage v-else>
            <Tabelle :key="`cus${index}`" :render="value.render" :param="scope.row"></Tabelle>
          </Vorlage>
        </Vorlage>
      </el-Tabellenspalte>
      <!--Grundlegende Operationen-->
      <el-table-column label="Vorgang">
        <template slot-scope="Umfang">
          <el-button Typ="Text" v-for="(Wert,Index) im Operator" @click="Wert.Klick(Bereich.Zeile, Wert)" :Schlüssel="Index">
            {{ wert.text }}
          </el-button>
        </Vorlage>
      </el-Tabellenspalte>
    </el-Tabelle>
    <!--Paginierungs-Plugin-->
    <el-pagination
      v-show="gesamt>0"
      :gesamt="gesamt"
      :page-size.sync="Seitengröße"
      :current-page.sync="aktuelleSeite"
      :Seitengrößen="[10, 20, 30, 50]"
      Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
      @current-change="AktuelleÄnderung handhaben"
      @size-change="Größenänderungsgriff"
      v-bind="$attrs">
    </el-pagination>
  </div>
</Vorlage>

<Skript>
// Renderfunktion importiere Tabelle aus „./table“
Standard exportieren {
  Komponenten: {Tabelle},
  Requisiten: {
    Tabellentitel: {
      Typ: Objekt,
      Standard: {
        Streifen: falsch,
        Grenze: falsch,
        Passform: stimmt,
        highlightCurrentRow: false
      }
    },
    ersteTabellenspalte: {
      Typ: Objekt,
      Standard: {
        wählen Sie: false,
        Breite: 55,
        Typ: "Auswahl"
      }
    },
    Tabellenspalte: {
      Typ: Array,
      Standard: []
    },
    Tabellendaten: {
      Typ: Array,
      Standard: []
    },
    Operator:
      Typ: Array,
      Standard: []
    },
    gesamt:
      Typ: Nummer,
      Standard: 0
    },
    Seite: {
      Typ: Nummer,
      Standard: 1
    },
    Grenze: {
      Typ: Nummer,
      Standard: 10
    },
    autoScroll: {
      Typ: Boolean,
      Standard: true
    }
  },
  berechnet: {
    aktuelleSeite: {
      erhalten () {
        diese Seite zurückgeben
      },
      setze (Wert) {
        dies.$emit('update:page', val)
      }
    },
    Seitengröße: {
      erhalten () {
        gib dies zurück.limit
      },
      setze (Wert) {
        dies.$emit('update:limit', val)
      }
    }
  },
  Daten () {
    zurückkehren {
    }
  },
  Methoden: {
    // Auf das Tabellenauswahlfeld achten handleSelectionChange (selection) {
      //Rufen Sie die handleSelectionChange-Methode auf, die der übergeordneten Komponente entspricht
      dies.$emit('handleSelectionChange', Auswahl)
    },
    // Wie viele Datensätze pro Seite sollen überwacht werden (Limit)
    handleSizeChange (Grenzwert) {
      dies.$emit('pagination', {page: diese.currentPage, limit: limit})
      wenn (dieses.autoScroll) {
        scrollTo(0, 800)
      }
    },
    // Überwachen Sie die aktuelle Seite (Seite)
    handleCurrentChange (Seite) {
      this.$emit('pagination', {page: page, limit: this.pageSize})
      wenn (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</Skript>
<Stilbereich>
</Stil>

// Tabelle.js
Standard exportieren {
  Requisiten: {
    rendern: {
      Typ: Funktion
    },
    Parameter: {
      Typ: Objekt
    }
  },
  rendern(h) {
    gib dies zurück.render(h, dies.param)
  }
}

<Vorlage>
  <div>
    <!--
        @Custom event="Methode der übergeordneten Komponente", in der untergeordneten Komponente löst this.$emit('Name des benutzerdefinierten Ereignisses') das Ereignis der übergeordneten Komponente aus.
        ref="proTable", auf der Unterkomponente markiert, zeigt auf die Unterkomponenteninstanz -->
    <proTable ref="proTable" :tableTitle="Tabellentitel" :tableCol="Tabellenspalte" :tableData="Tabellendaten" :operator="Operator"
        :firstTableCol="ersteTabellenspalte"
        @handleSelectionChange="HandleAuswahlÄnderung"
        :total="gesamt" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList"/>

  </div>
</Vorlage>

<Skript>
importiere proTable aus './pro-table'

Standard exportieren {
  Komponenten:
    proTabelle
  },
  Daten() {
    zurückkehren {
      Abfrageparameter: {
        Seite: 1,
        Grenze: 10,
      },
      Typ: "Erfolg",
      gesamt: 50,
      // Festlegen von Tabellenattributen in Element-UI tableTitle: {
        'Streifen': wahr,
        "highlightCurrentRow": wahr
      },
      //Setze die Tabellenspalte tableCol: [
        { prop:'Datum',label:'Datum'},
        { prop:'name',label:'Name'},
        { prop:'address',label:'Adresse',width: 300},
        { prop:'src',label:'Bild',  
        getImgurl: (Zeile, Spalte, Zellenwert) => { return this.getImgurl(Zeile)}, 
        previewSrcList: (Zeile, Spalte, Zellenwert) => {return this.listImgUrl(Zeile)}},
        { prop:'Geschlecht', label:'Geschlecht',  
        formatter: (Zeile, Spalte, Zellenwert) => {return this.sexFormatter(Zeile)}},
        { prop:'src',label:'Bild',  
        getImgurl: (Zeile, Spalte, Zellenwert) => { return this.getImgurl(Zeile)}},
        { prop:'text',label:'funktion', render: (h, params) => {return this.render(h, params)}}
      ],
      // Grundlegende Tabellenoperationen Operator: [
        {'text':'Details', Klick: (Zeile, Spalte, Zellenwert) => {return this.getInfo(Zeile)}},
        {'text':'Löschen', click: (row, col, cellValue) => {return this.delInfo(row)}},
        {'text':'Bearbeiten', click: (row, col, cellValue) => {return this.editInfo(row)}},
      ],
      // Simulationsdaten tableData: [
        {
          Datum: '2016-05-02',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1518, Jinshajiang Road, Putuo District, Shanghai“,
          Geschlecht: 0,
          Bild: „https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-193cbb243dc14d3a016caaa54ba02837_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628435704&t=deb5584cb9ff53fe6977f14a5e0755bb“
        }, {
          Datum: '2016-05-04',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1517, Jinshajiang Road, Putuo District, Shanghai“,
          Geschlecht: 1,
          Bild: „https://pic1.zhimg.com/80/v2-894ab624807fd4cfa33dd4e42cc90ac8_720w.jpg?source=1940ef5c“
        }, {
          Datum: '2016-05-01',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1519, Jinshajiang Road, Putuo District, Shanghai“,
          Geschlecht: 0,
          img:'xx.jpg'
        }, {
          Datum: '2016-05-03',
          Name: 'Wang Xiaohu',
          Adresse: „Nr. 1516, Jinshajiang Road, Putuo District, Shanghai“,
          Geschlecht: 1,
          img:'xx.jpg'
        }],
      ersteTabellenspalte: {
        'auswählen': wahr,
        'Typ': 'Auswahl'
      }
    }
  },
  Methoden: {
    getInfo(Wert) {
      //Triggern Sie die übergeordnete Methode console.log("Get details",val)
    },
    delInfo(Wert) {
      //Triggere die übergeordnete Methode console.log("delete information",val)
    },
    editInfo(Wert) {
      // Übergeordnete Methode auslösen console.log("Informationen bearbeiten",val)
    },
    getImgurl(Wert) {
      konsole.log(val.img)
      Rückgabewert.img
    },
    sexFormatter(Wert) {
      return val.sex === 0 ? 'männlich' : 'weiblich'
    },
    handleSelectionChange(Wert) {
      console.log("Auswahlfeld abhören",val)
    },
    getList(queryParams) {
      console.log("übergeordnete Methode",QueryParams)
    },
    listImgUrl() {
      lass array = [];
      array.push("https://pic1.zhimg.com/80/v2-894ab624807fd4cfa33dd4e42cc90ac8_720w.jpg?source=1940ef5c");
      array.push("https://cdn.pixabay.com/photo/2021/07/01/21/20/girl-6380331_960_720.jpg");
      Array zurückgeben;
    },
    rendern(h, Parameter) {
      return h('span', null, 'Ich bin eine Renderkomponente')
    }
  }
}
</Skript>