Wie element-ui die Wiederverwendung von Tabellenkomponenten implementiert

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 弄'
}]

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

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>

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

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'
   }]
  }
 },
...

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>
...

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(){...}
  }
...

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>

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] : [] 
  }
 }
}

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!