页面结构:
<div class="buttonGroup">
<el-button type="primary" @click=allExport>全部导出</el-button>
<el-button type="default" @click=partialExport>导出</el-button>
</div>
</div>
<div class="contain-main">
<el-table ref="multipleTable" tooltip-effect="dark" style="width: 100%" :data="activateRecordList"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="申请时间" width="150">
<template slot-scope="scope">{{
timeStampChange(scope.row.applyTime)
}}</template>
</el-table-column>
<el-table-column label="教室" prop="roomCode"> </el-table-column>
<el-table-column label="屏幕">
<template slot-scope="scope">{{
typeFn(scope.row.type)
}}</template>
</el-table-column>
<el-table-column label="序号" width="150" prop="groupIndex">
</el-table-column>
<el-table-column label="MAC地址" width="200" prop="mac">
</el-table-column>
<el-table-column label="IP地址" width="200" prop="ip">
</el-table-column>
<el-table-column label="激活码" width="150" prop="activationCode">
</el-table-column>
<el-table-column label="备注" prop="remark"> </el-table-column>
</el-table>
所需变量:
activateRecordList: [],//激活记录
activeArr: "",//需要导出的数据
事件:
//生成下载文件
downloadCallback (res, fileName) {
const content = res;
const blob = new Blob([content]);
if ("download" in document.createElement("a")) {
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
navigator.msSaveBlob(blob, fileName);
}
},
//全部导出
allExport () {
this.$confirm('确认全部导出', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = {
exportType: 1,
};
downloadStrategyResult(params).then((res) => {
this.downloadCallback(res, '激活申请信息.xlsx');
console.log(res
);
});
this.$message({
type: 'success',
message: '导出成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消导出'
});
});
},
//部分导出
partialExport () {
let params = {
exportType: 2,
recordIds: this.activeArr
}
if (this.activeArr) {
downloadStrategyResult(params).then((res) => {
this.downloadCallback(res, '激活申请信息.xlsx');
});
} else {
window.alert('请勾选需要导出的数据')
}
console.log(this.activeArr);
},
// table数据选中状态
handleSelectionChange (val) {
var arr = [];
for (var i = 0; i < val.length; i++) {
arr.push(val[i].id);
}
this.activeArr = arr.join(',')
},
//记录录入时间
timeStampChange (time) {
let p = "";
var date = new Date(time); // 获取时间戳
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? "0" + MM : MM;
let d = date.getDate();
d = d < 10 ? "0" + d : d;
let h = date.getHours();
h = h < 10 ? "0" + h : h;
let m = date.getMinutes();
m = m < 10 ? "0" + m : m;
let s = date.getSeconds();
s = s < 10 ? "0" + s : s;
p = y + "-" + MM + "-" + d + " " + h + ":" + m;
return p;
},
//对应每列的名字
typeFn (e) {
switch (e) {
case 1:
return "教师屏";
case 2:
return "小组屏";
default:
return "";
}
},