Heim > Artikel > Web-Frontend > Verwenden Sie VUE element-ui, um eine wiederverwendbare Tabellenkomponente zu schreiben
Die Tabellenkomponente von Ele.me ist sehr leistungsfähig und reicht grundsätzlich für verschiedene Tabellen im Projekt aus, aber...die Bedienung in Spalteneinheiten bin ich nicht gewohnt. Also wurde es auf eine andere Art und Weise geändert. In diesem Artikel wird hauptsächlich VUE element-ui vorgestellt, um einen Beispielcode für die Wiederverwendung der Tabellenkomponente zu schreiben. Ich hoffe, dass er für alle hilfreich ist.
Es gibt viele Tabellen im Projekt, daher ist die Wiederverwendbarkeit das Wichtigste.
Schritt 1
Beginnen wir mit einer einfachen Tabellenanzeige
Offizielle Tabellendaten
tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }]
table.vue
<template> <el-table :data="tableData" border> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template>
Schritt 2
Vereinfachen Sie die Tabelle:
//table.vue <template> <el-table :data="tableData" border> <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name"></el-table-column> </el-table> </template> <script> export default{ name: 'table', data(){ return{ tableData:[...], tableKey: [{ name: 'date', value: '日期' },{ name: '姓名', value: 'name' },{ name: '地址', value: 'address' }] } } } </script>
Schritt 3
Die Wiederverwendung von table.vue bedeutet, ihm gleichzeitig Daten zu geben. Sagen Sie ihm mein Feld Name
Erstellen Sie eine neue übergeordnete Komponente sl_table.vue
//sl_table.vue <template> <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table> </template> <script> import Table from '@/components/table' export default{ name: 'sl-table', data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期' },{ name: '姓名', value: 'name' },{ name: '地址', value: 'address' }] } }, components: { 'sl-table': Table } } </script>
table.vue ist noch einfacher
//table.vue <template> <el-table :data="tableData" border> <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name"></el-table-column> </el-table> </template> <script> export default{ name: 'table', data(){ return{ } }, props:['tableData','tableKey'], } </script>
Schritt 4
Sie können die Form der Tabelle nach Ihren Bedürfnissen ändern
Spaltenbreite
Das ist relativ einfach, Sie können direkt ein Attribut hinzufügen
//sl_table.vue ... data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期', width: 80 },{ name: '姓名', value: 'name', width: 80 },{ name: '地址', value: 'address' }] } }, ...
table.vue
//table.vue ... <el-table-column v-for="(item,key) in tableKey" :key="key" :prop="item.value" :label="item.name" :width="item.width"></el-table-column> ...
Benutzerdefinierte Vorlagenspalte
Wenn wir der Komponente mitteilen müssen, dass es sich um eine benutzerdefinierte Spalte handelt, fügen Sie eine Eigenschaftsoperationstabelle hinzu. vue
Tabellenerweiterungszeile
<el-table-column v-for="(item,key) in tableKey" v-if="!item.operate" :key="key" :prop="item.value" :label="item.name" :width="item.width"></el-table-column> <!-- 自定义 --> <el-table-column v-else> <template scope="scope"> <slot :name="item.value" :$index="scope.$index" :row="scope.row"></slot> </template> </el-table-column> //sl_table.vue <sl-table :tableData="tableData" :tableKey="tableKey"> <template slot="date" scope="scope"> <span>{{ scope.row.date | DateFilter }}</span> </template> </sl-table> ... data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期', operate: true },{ name: '姓名', value: 'name', operate: false },{ name: '地址', value: 'address', operate: false }] } }, filters: { DateFilter(){...} } ...
Ähnlich der Breite, solange sl_table.vue ein isExpand-Attribut übergibt. Hier ist ein Effekt, der jeweils nur eine Zeile erweitern kann:
table.vue
//sl_table.vue <sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true"> <template slot="expand" scope="scope"> {{...expand something}} </template> ... </sl-table>
Andere Operationen (Sortieren, Mehrfachauswahl) werden ebenfalls auf ähnliche Weise hinzugefügt. . . Es besteht keine Notwendigkeit, auf Details einzugehen.
//table.vue <el-table :data="tableData" border @expand="handleExpand" ref="raw_table"> <el-table-column v-if="isExpand" type="expand"> <template scope="scope"> <slot name="expand" :$index="scope.$index" :row="scope.row"></slot> </template> </el-table-column> </el-table> ... props: ['tableData','tableKey','isExpand','isExpandOnly'], methods: { handleExpand(row,is_expand){ if(this.isExpand && this.isExpandOnly){ this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] } } }
Verwandte Empfehlungen:
CSS-Beispiele für fünf gängige Layoutmethoden mit Tabellen_CSS-Tutorial_CSS_Webseitenproduktion
Anleitung Verwenden Sie das Tabellen-Tag in HTML
Bootstrap-Probleme zu CellStyle und Formatter in der Tabelle
Das obige ist der detaillierte Inhalt vonVerwenden Sie VUE element-ui, um eine wiederverwendbare Tabellenkomponente zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!