iview admin + bootstrap-table + tableexport 实现前端导出excel

1.终端执行

npm install bootstrap@3 --save--dev
npm install bootstrap-table@1.11.1 --save--dev
npm install --save popper.js
npm install tableexport.jquery.plugin  --save--dev

main.js 添加以下代码

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap-table/dist/bootstrap-table.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.js'
import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js'
import 'tableexport.jquery.plugin/tableExport.min.js'
// To export the table in XLSX (Excel 2007+ XML Format) format, you need to include additionally
import 'tableexport.jquery.plugin/libs/js-xlsx/xlsx.core.min.js'

（bootstrap要依赖jquery：如何引入jquery）

2.页面

<table id="mytab" class="table table-hover"></table>

初始化表格

initTable() {
      let that = this;
      $("#mytab").bootstrapTable("destroy");
      $("#mytab").bootstrapTable({
        data: that.data,//获取到的数据
        showColumns: true,
        smartDisplay: false,
        columns: [{
            title: "名称",
            field: "name"
        }]
      });
}

数据改变时刷新表格（分页操作传pageNumber，pageSize）

$("#mytab").bootstrapTable("refresh", this.data);
$("#mytab").bootstrapTable("refreshOptions", {
              pageNumber: this.current,
              pageSize: this.pageSize
            });

3.导出excel

 $("#mytab").tableExport({
        type: "excel",
        exportDataType: "all",
        ignoreColumn: [3],//忽略某一列的索引
        fileName: "excel名称", //下载文件名称
        onCellHtmlData: function(cell, row, col, data) {
          return data;
        }
});

4.让导出的excel带边框

修改tableexport.jquery.plugin/libs/js-xlsx/xlsx.core.min.js文件

H += "<table><thead>"; u = y(b); c(u).each(function () {

改为

H += "<table border='1'><thead>"; u = y(b); c(u).each(function () {

***其他笔记

隐藏某个字段（隐藏columns中field为name的字段）

$("#mytab").bootstrapTable("hideColumn", "name");

columns列自增序号

		 {
            field: "SerialNumber",
            title: "序号",
            formatter: function(value, row, index) {
              return index + 1;
            }
          }

columns格式化操作

		{
            title: "性别",
            field: "gender",
            formatter: function(value, row, index) {
              if (gender == 1) {
                return "男";
              } else {
                return "女";
              }
            }
          },
           {
            title: "时间",
            field: "time",
            formatter: function(value, row, index) {
              return  formatDate(
                new Date(row.time),
                "yyyy-MM-dd"
              );
            }
          },

columns编辑删除操作

{
            field: "oper",
            title: "操作",
            formatter: function(value, row, index) {
              return '<button class="btn btn-info info">编辑</button>';
            },
            events: {
              "click .info": function(ev, value, row, index) {
                console.log(ev, value, row, index);
              }
            }
          }