el-table 表格加图片、加音频、加序号、多级动态表头

elemnet-ui组件库大家应该不陌生，在展示多条结构类似的数据方面，el-table可谓扛把子，不仅可以把数据展示的整齐，还支持排序、筛选或其他自定义操作。那么，除了上述的基本功能外，你还遇到过哪些花样的需求呢？下面我们一起盘点下吧~

1 基本使用

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

<template>
 <el-table:data="tableData" style=" 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=" 100%;height: 32px;" v-if="scope.row.showAudio===1">
       <audio controls style="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
  }
]

最终效果如下，完成！

欢迎大家关注我的公粽号，文章更早、更全，扫下面二维码或微信搜“前端便利贴” ，期待您的关注~