小編給大家分享一下VUE中element-ui如何實現一個復用Table組件，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創新互聯是一家從事企業網站建設、成都網站建設、成都網站設計、行業門戶網站建設、網頁設計制作的專業網站制作公司，擁有經驗豐富的網站建設工程師和網頁設計人員，具備各種規模與類型網站建設的實力，在網站建設領域樹立了自己獨特的設計風格。自公司成立以來曾獨立設計制作的站點近1000家。

步驟一

先來個基本的表格展示

官例的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>

步驟二

簡化一下表格：

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

步驟三

復用table.vue就是————給它數據的同時告訴它我的字段名唄

新建一個父組件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就更簡單了

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

步驟四

可以根據需求修改table的形式

列寬度

這個較為簡單，可以直接加個屬性

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

自定義模板列

如果我們需要告訴組件哪個是自定義的列，所以添加一個屬性operate

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

表格展開行

類似寬度，只要sl_table.vue傳入一個isExpand的屬性。這里加個每次只能展開一行的效果：

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

看完了這篇文章，相信你對“VUE中element-ui如何實現一個復用Table組件”有了一定的了解，如果想了解更多相關知識，歡迎關注創新互聯成都網站設計公司行業資訊頻道，感謝各位的閱讀！

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文名稱：VUE中element-ui如何實現一個復用Table組件-創新互聯
分享網址：http://vcdvsql.cn/article14/iecde.html

成都網站建設公司_創新互聯，為您提供響應式網站、做網站、網站建設、虛擬主機、網站設計、靜態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯