iview admin + bootstrap-table + tableexport 实现前端导出excel
1.终端执行
npm install bootstrap@3 --save--dev
npm install [email protected] --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 += ""; u = y(b); c(u).each(function () {
改为
H += ""; 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 '';
},
events: {
"click .info": function(ev, value, row, index) {
console.log(ev, value, row, index);
}
}
}