前端日常-VUE-element表格table篇

1、表格导出功能

​export function get(params) {
  return request({
    url: '/api/xx/xxx',
    method: 'GET',
    responseType: 'blob',
    params: params
  })
}
get(params).then((res) => { // 接口调用
  const blob = new Blob([res]);  // 把得到的结果用流对象转一下
  var a = document.createElement("a"); //创建一个<a></a>标签
  a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值
  a.download = "xx记录.xlsx"; //设置文件名
  a.style.display = "none";  // 障眼法藏起来a标签
  document.body.appendChild(a); // 将a标签追加到文档对象中
  a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
  a.remove(); // 一次性的，用完就删除a标签
})
​

2、列表表头设置icon

<el-table-column width="100" label="联系人" align="left" prop="liaison">
  <template slot="header" slot-scope="scope">
    <div class="leftone">联系人</div>
    <div class="rightone">
      <i class="el-icon-arrow-up"></i>
      <i class="el-icon-arrow-down"></i>
  </div>
  </template>
</el-table-column>

3、过滤器filters的使用

<el-table-column width="140" label="入驻签约状态" align="left" prop="signStatus">
  <template slot="header" slot-scope="scope">
          <div class="leftone">入驻签约状态</div>
          <div class="rightone">
            <i class="el-icon-arrow-up"></i>
            <i class="el-icon-arrow-down"></i>
        </div>
  </template>
  <template slot-scope="scope">
    <span>{{ scope.row.signStatus | statusFilter }}</span>
  </template>
</el-table-column>
data () {
}
filters: {
  statusFilter (status) {
    switch (status) {
      case 'UNSIGN': return '入驻未签约'
      case 'SIGNED' : return '入驻签约成功'
      default: return '未签约' 
    }
  },
},
created () {
}

 4、表头动态展示

<el-table-column label="使用情况/次" align="center" v-if="merchantLists.length > 0">
        <el-table-column v-for="item in merchantLists" :prop="item.couponAmount + '_count'" :label="item.stockName"></el-table-column>
</el-table-column>