Das Vue+Element-UI-Tabellenkapselungs-Tag verwendet das Slot-Slot-Tag

Wir wissen, dass viele Systeme das Hinzufügen verschiedener Tags zu Tabellen erfordern, um einige Attribute zu markieren. Das Hinzufügen von Tags in element-ui ist sehr einfach. Das Wichtigste ist, die Slot-Funktion von Vue zu verwenden. Verstehen Sie zunächst, was ein Slot ist.

Slot

Speichern Sie die offizielle komplizierte Erklärung und den Code. Die Bedeutung von Slot besteht einfach darin, irgendwo in der Unterkomponente einen Platzhalter zu belassen Mit dieser untergeordneten Komponente können Sie das Erscheinungsbild des Platzhalters anpassen, bei dem es sich um einen Titel, eine Schaltfläche oder sogar eine Tabelle oder ein Formular handeln kann.

Warum brauchen wir Slots? Der Grund, warum wir Komponenten extrahiert haben, liegt darin, dass zu viel wiederverwendbarer Code vorhanden ist. Bei der Verwendung wiederverwendbarer Komponenten wird das Kopieren und Einfügen erheblich reduziert. Stellen Sie sich vor, es gibt zwei Komponenten, die bis auf einen Teil gleich sind. An dieser Stelle besteht keine Notwendigkeit, andere Teile zu wiederholen. Wenn wir den Slot haben, können wir die gemeinsamen Teile der beiden Komponenten extrahieren und dann den unterschiedlichen Teil durch einen Slot ersetzen. Bei einem späteren Aufruf können wir nur den Code für diesen Teil schreiben. Dies entspricht unserem Komponentisierungsgedanken und erspart viel Arbeit.

element-table ruft Zeileninformationen ab

In, verwenden Sie slot-scope, um die aktuellen Zeileninformationen abzurufen

<template slot-scope="scope" ></template>

• scope.$index Get der Index
• scope.row Aktuelle Zeile (Objekt) abrufen

Verwenden Sie den Slot

Fügen Sie in den Tabellendaten tag:true hinzu, wenn Sie eine Schleife ausführen <el-table-column> und auf ein mit tag festgelegtes Attribut stößt, wird dieser Slot eingegeben und die übergeordnete Komponente dieser Komponente aufgerufen, um den Inhalt anzupassen, der in der Beschriftungsspalte

In der Tabellenkomponente

angezeigt werden soll

<p class="table-content">
    <el-table
        :data="list"
        class="mt-10"
        fit
        stripe
        empty-text="暂无数据"
        :highlight-current-row="true"
    >
        <el-table-column
            v-for="(item, index) in table_title"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width?item.width:null"
            :min-width="item.minwidth?item.minwidth:null"
            :sortable="item.sortable?item.sortable:false"
            :align="item.columnAlign"
            :header-align="item.titleAlign"
        >
            <template slot-scope="scope">
                <template v-if="item.tag">
                    <slot name="tags" :scope="scope.row"></slot>
                </template>
                <span v-else>{{scope.row[item.prop]}}</span>
            </template>
        </el-table-column>
    </el-table>
</p>

wie man den Inhalt und den Titel von <el-table> in einer Schleife verarbeitet, ist wie im obigen Code gezeigt

In der übergeordneten Komponente, die auf die Tabellenkomponente verweist

<table-page
    :list="listData"
    :table_title="table_title">
    <template v-slot:tags="scope">
        <el-tag
          v-if="scope.scope.tag == 1"
          size="small"
          type="primary"
          >tag1
        </el-tag>
        <el-tag
          v-else-if="scope.scope.tag == 2"
          size="small"
          type="warning"
          >tag2
        </el-tag>
        <el-tag
          v-else-if="scope.scope.tag == 3"
          size="small"
          type="success"
          >tag3
        </el-tag>
    </template>
</table-page>

Tabellenverwendung Die Daten

table_title

[
  {
    prop: 'id',
    label: '编号',
    width: '100',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'date',
    label: '日期',
    width: '150',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'name',
    label: '姓名',
    width: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'province',
    label: '省份',
    minwidth: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true,
    isEdit: true
  },
  {
    prop: 'city',
    label: '市区',
    minwidth: '120',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'address',
    label: '地址',
    minwidth: '300',
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
  {
    prop: 'auditflag',
    label: '状态',
    minwidth: '80px',
    tag: true,
    titleAlign: 'center',
    columnAlign: 'center',
    sortable:true
  },
];

listData

 [
    {
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        tag: "1"
    }, {
        id: 2,
        date: '2016-05-04',
        name: '王小',
        province: '北京',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333,
        tag: "2"
    }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333,
        tag: "3"
    }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "1"
    }, {
        id: 5,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "2"
    }, {
        id: 6,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "3"
    }, {
        id: 7,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "1"
    }, {
        id: 8,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "2"
    }, {
        id: 9,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "3"
    }, {
        id: 10,
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: "1"
    }
],复制代码

Präsentationseffekt

ist die letzte Spalte Das ist es !

Empfohlenes Tutorial: „JS-Tutorial“

Das obige ist der detaillierte Inhalt vonDas Vue+Element-UI-Tabellenkapselungs-Tag verwendet das Slot-Slot-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!