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

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

1 基本使用

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


View Code

2 表格数据排序,首行加序号

2.1 当前页排序

设置type属性为index即可显示从 1 开始的索引号。注意:此时如果表格有分页,当前序号只是对当前页的排序。而不是全部数据。每次翻页,序号都会从1开始。

2.2 全部数据排序


 

scope.$index:当前行在当前页的序号

page:当前页数

limit:一页显示多少行

3 表格中显示图片


  

4 表格中添加开关(el-switch)


  

5 表格中添加音频播放

通过上面2个实例,我们觉得scope很神奇,什么都可以放。此时如果想添加音频,是否可以直接播放呢?我们先了解一下几种常见的音频格式以及播放方式。

1 .mp3格式,H5的标签可直接播放。

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); } } });

  
 

以上3种需求的实现效果如下:

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

6 动态生成多级表头

我们知道el-table支持多级表头,效果如下图,顺便我们讨论下多级表头时,表格是如何渲染的。下图中数字代表层级,如果此时我说不管表头有多少级,每一级表头只需要关心自己的直接子元素,以此类推,直到最后一级没有子元素的表头去匹配数据,整个表格就可以正确渲染,你觉得对吗?

也就是说,下图中,第一级表头“配送信息”只需正确找到自己的两个孩子“姓名”和“地址”....., 到了没有子元素的3-1“省份”,那它就负责去匹配数据。

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

原理我们已经理解,但是官方示例中表头都是在页面里写死的固定数据。实际应用中,很多情况下表头是是接口返回的。那此时,表头需要动态生成,且要保证层级正确,更重要的是,数据渲染要准确。

我们将直接层级关系的表头比喻成父子,那么将表头数据设计成相应的嵌套结构。通过双层for循环,多级表头是不是就可以正确渲染了呢?然后让最后一级表头去匹配数据,数据也就可以正确展示了吧?试一下吧~假设接口返回的多级动态表头数据结构如下:

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

相信你已经看出谁有子元素了,下面看如何通过双层for循环渲染多级表头。


 column
   v-for='item in tableHeader' :label="item.label"
        :prop='item.prop' :key='item.prop'>
    
 

我们再给一组表格数据:

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

最终效果如下,完成!

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

 

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

你可能感兴趣的:(el-table 表格加图片、加音频、加序号、多级动态表头)