Dieses Mal zeige ich Ihnen, wie element-ui die Wiederverwendung von Tabellenkomponenten implementiert. Welche Vorsichtsmaßnahmen es gibt, um die Wiederverwendung von Tabellenkomponenten zu implementieren? ein Blick.
Die Tabellenkomponente von Ele.me ist sehr leistungsfähig und reicht grundsätzlich für verschiedene Tabellen im Projekt aus, aber... ich bin nicht an ihre spaltenbasierten Operationen gewöhnt . =. =Also wurde es auf eine andere Weise geändert (ich werde Ihnen nicht sagen, dass sich das Wesentliche nicht geändert hat).
Es gibt viele Tabellen im Projekt, daher ist die Wiederverwendbarkeit das Wichtigste
Schritt 1
Beginnen wir mit einer einfachen Tabellendarstellung
Offizielle TabelleDaten
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 弄'
}]Nach dem Login kopieren
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>
Nach dem Login kopieren
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>Nach dem Login kopieren
Schritt 3
Um table.vue wiederzuverwenden, muss ich ihm Daten geben und ihm gleichzeitig meinen Feldnamen mitteilen
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>Nach dem Login kopieren
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>Nach dem Login kopieren
Schritt 4
Die Form der Tabelle kann je nach Bedarf geändert werden
Spaltenbreite
Dies ist relativ einfach, Sie können direkt ein Attribut
//sl_table.vue
...
data(){
return {
tableData: [...]
tableKey: [{
name: 'date',
value: '日期',
width: 80
},{
name: '姓名',
value: 'name',
width: 80
},{
name: '地址',
value: 'address'
}]
}
},
...Nach dem Login kopieren
hinzufügen
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>
...
Nach dem Login kopieren
Benutzerdefinierte Vorlagenspalten
Wenn wir der Komponente mitteilen müssen, dass es sich um eine benutzerdefinierte Spalte handelt, fügen wir ein Attribut „operate“ hinzu
table.vue
<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(){...}
}
...Nach dem Login kopieren
Tabellenerweiterungszeile
Ähnlich wie width, solange sl_table.vue ein isExpand-Attribut übergibt. Hier ist ein Effekt, der jeweils nur eine Zeile erweitern kann:
//sl_table.vue
<sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true">
<template slot="expand" scope="scope">
{{...expand something}}
</template>
...
</sl-table>Nach dem Login kopieren
table.vue
//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] : []
}
}
}Nach dem Login kopieren
Andere Operationen (Sortieren, Mehrfachauswahl) werden ebenfalls auf ähnliche Weise hinzugefügt. . . Es besteht keine Notwendigkeit, auf Details einzugehen.
Ich glaube, dass Sie die Methode zum Lesen dieses Artikels beherrschen. Weitere spannende Artikel finden Sie auf der chinesischen PHP-Website.
Empfohlene Lektüre:
Das obige ist der detaillierte Inhalt vonWie element-ui die Wiederverwendung von Tabellenkomponenten implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
