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
}
]
最终效果如下，完成！
欢迎大家关注我的公粽号，文章更早、更全，扫下面二维码或微信搜“前端便利贴” ，期待您的关注~
