VUE element-ui implementiert die Wiederverwendung von Tabellenkomponenten

In diesem Artikel wird hauptsächlich VUE element-ui vorgestellt, um einen Beispielcode für die Wiederverwendung von Tabellenkomponenten zu schreiben. Ich hoffe, dass er allen helfen kann.

Die Tabellenkomponente von Ele.me ist sehr leistungsfähig und reicht im Grunde für verschiedene Tabellen im Projekt aus, aber...die spaltenbasierten Operationen bin ich nicht gewohnt =. =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 a Basistabellenanzeige

tableData

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. Lassen Sie uns Schauen Sie sich die Tabelle an:

//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: &#39;table&#39;,
 data(){
  return{
   tableData:[...],
   tableKey: [{
    name: &#39;date&#39;,
    value: &#39;日期&#39;
   },{
    name: &#39;姓名&#39;,
    value: &#39;name&#39;
   },{
    name: &#39;地址&#39;,
    value: &#39;address&#39;
   }]
  }
 }
}
</script>

Schritt 3

Die Wiederverwendung von table.vue bedeutet, ihm die Daten zu geben und ihm gleichzeitig meinen Feldnamen mitzuteilen Zeit呗

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 &#39;@/components/table&#39;
export default{
 name: &#39;sl-table&#39;,
 data(){
  return {
   tableData: [...]
   tableKey: [{
    name: &#39;date&#39;,
    value: &#39;日期&#39;
   },{
    name: &#39;姓名&#39;,
    value: &#39;name&#39;
   },{
    name: &#39;地址&#39;,
    value: &#39;address&#39;
   }]
  }
 },
 components: {
  &#39;sl-table&#39;: 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: &#39;table&#39;,
 data(){
  return{
   
  }
 },
 props:[&#39;tableData&#39;,&#39;tableKey&#39;],
}
</script>

Schritt 4

Sie können die Form der Tabelle entsprechend 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'
   }]
  }
 },
...

Tabelle. 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, welche benutzerdefinierte Spalte ist, fügen Sie 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: &#39;date&#39;,
     value: &#39;日期&#39;,
     operate: true
    },{
     name: &#39;姓名&#39;,
     value: &#39;name&#39;,
     operate: false
    },{
     name: &#39;地址&#39;,
     value: &#39;address&#39;,
     operate: false
    }]
   }
  },
  filters: {
   DateFilter(){...}
  }
...

Tabellenerweiterungszeile

ähnelt der Breite, 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: [&#39;tableData&#39;,&#39;tableKey&#39;,&#39;isExpand&#39;,&#39;isExpandOnly&#39;],
methods: {
 handleExpand(row,is_expand){
  if(this.isExpand && this.isExpandOnly){
   this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] 
  }
 }
}

Andere (Sortierung, Mehrfachauswahl) Operationen werden ebenfalls auf ähnliche Weise hinzugefügt. . . Es besteht keine Notwendigkeit, auf Details einzugehen.

Verwandte Empfehlungen:

Detaillierte Erläuterung des asynchronen Ladens von Daten mit dem DataTable-Plug-in

HTML Tabelle mit der Maus ziehen So implementieren Sie die Sortierung

JS implementiert einen festen Tabellenkopf und der Tabellenkopf scrollt mit horizontalem Scrollen

Das obige ist der detaillierte Inhalt vonVUE element-ui implementiert die Wiederverwendung von Tabellenkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!