el-table 表格加圖片、加音頻、加序號、多級動態表頭

elemnet-ui組件庫大家應該不陌生，在展示多條結構類似的數據方面，el-table可謂扛把子，不僅可以把數據展示的整齊，還支持排序、篩選或其他自定義操作。那么，除了上述的基本功能外，你還遇到過哪些花樣的需求呢？下面我們一起盤點下吧~

1 基本使用

如果熟悉基本操作，可直接看下面第二小節。

<template>
 <el-table:data="tableData" style="width: 100%">
  <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>
<script>
 export default {
  data() {
   return {
    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 弄'}
    ]
   }
  }
}
</script>

2 表格數據排序，首行加序號

2.1 當前頁排序

設置type屬性為index即可顯示從 1 開始的索引號。注意：此時如果表格有分頁，當前序號只是對當前頁的排序。而不是全部數據。每次翻頁，序號都會從1開始。

2.2 全部數據排序

<el-table-column fixed label="序號"width="50" align="center">
 <template scope="scope">
   <span>{{scope.$index+(page - 1) * limit + 1}} </span>
  </template>
</el-table-column>

scope.$index：當前行在當前頁的序號

page：當前頁數

limit：一頁顯示多少行

3 表格中顯示圖片

<el-table-column prop="photo" label="照片">
  <template slot-scope="scope">
    <img :src="scope.row.photo" width="40" height="40" alt=""/>
  </template>
</el-table-column>

4 表格中添加開關(el-switch)

<el-table-column property="state" label="狀態">
  <template slot-scope="scope">
    <el-switch v-model="scope.row.state"></el-switch>
  </template>
</el-table-column>

5 表格中添加音頻播放

通過上面2個實例，我們覺得scope很神奇，什么都可以放。此時如果想添加音頻，是否可以直接播放呢？我們先了解一下幾種常見的音頻格式以及播放方式。

1 .mp3格式，H5的<audio>標簽可直接播放。

2 .wav格式，該格式沒辦法直接播，只能先下載到本地，通過本地播放器播放。 

鑒於以上情況，我們拿到音頻數據后，需要先判斷一下音頻格式，再為其選用正確處理方式。

this.tableData.forEach((item) => {
// 接口返回值中，rowRecording字段 表示音頻
  let rowRecording = item.recording; if (rowRecording === '') { // 字段值為空，頁面顯示‘暫無錄音’ this.$set(item, 'showAudio', 0); } else { let arr = rowRecording.split('.'); // 拿到音頻格式后綴 let recordTypeName = arr[arr.length - 1]; if (recordTypeName === 'mp3') { // mp3格式，直接播放 this.$set(item, 'showAudio', 1); } else if (recordTypeName === 'wav') { // wav格式，提示下載 this.$set(item, 'showAudio', 2); } } });

<el-table-column prop="recording" label="錄音" width="120">
  <template slot-scope="scope">
     <div style="width: 100%;height: 32px;" v-if="scope.row.showAudio===1">
       <audio controls style="width:100%;height: 100%;">
          <source :src="scope.row.recording" type="audio/wav">
       </audio>
      </div>
      <div v-if="scope.row.showAudio===2">
        <a :href="scope.row.recording">點擊下載播放</a>
      </div>
      <div v-if="scope.row.showAudio===0">暫無錄音</div>
 </template>
 </el-table-column>

以上3種需求的實現效果如下：

6 動態生成多級表頭

我們知道el-table支持多級表頭，效果如下圖，順便我們討論下多級表頭時，表格是如何渲染的。下圖中數字代表層級，如果此時我說不管表頭有多少級，每一級表頭只需要關心自己的直接子元素，以此類推，直到最后一級沒有子元素的表頭去匹配數據，整個表格就可以正確渲染，你覺得對嗎？

也就是說，下圖中，第一級表頭“配送信息”只需正確找到自己的兩個孩子“姓名”和“地址”....., 到了沒有子元素的3-1“省份”，那它就負責去匹配數據。

原理我們已經理解，但是官方示例中表頭都是在頁面里寫死的固定數據。實際應用中，很多情況下表頭是是接口返回的。那此時，表頭需要動態生成，且要保證層級正確，更重要的是，數據渲染要准確。

我們將直接層級關系的表頭比喻成父子，那么將表頭數據設計成相應的嵌套結構。通過雙層for循環，多級表頭是不是就可以正確渲染了呢？然后讓最后一級表頭去匹配數據，數據也就可以正確展示了吧？試一下吧~假設接口返回的多級動態表頭數據結構如下：

tableHeader: [
 {'label': '日期','prop': 'date'}, { 'label': '信息', 'prop': '信息', children: [ {prop:"name",label:"姓名"}, {prop:"province",label:"省份"}, {prop:"city",label:"市區"}, {prop:"zip",label:"郵編"} ] } ]

相信你已經看出誰有子元素了，下面看如何通過雙層for循環渲染多級表頭。

<el-table :data="tableList">
 <el-table-column
   v-for='item in tableHeader' :label="item.label" :prop='item.prop' :key='item.prop'> <template v-if='item.children && item.children.length'> <el-table-column v-for="item1 in item.children" :label="item1.label" :prop='item1.prop':key='item1.prop'> </el-table-column> </template> </el-table-column> </el-table>

我們再給一組表格數據：

tableList: [
  { 
    "date": "2020-06-01", "name": "王小虎", "province": "上海", "city": "普陀區", "zip": 200333 } ]

最終效果如下，完成！

 

歡迎大家關注我的公粽號，文章更早、更全，掃下面二維碼或微信搜“前端便利貼” ，期待您的關注~