vue + element导出表格(导出不展示的列、且不导出展示的最后一列)
导出如下图所示的表格,但最后【查看】一列不导出,还需导出未展示的一列
·
需求:导出如下图所示的表格,但最后【查看】一列不导出,还需导出未展示的一列
效果图如下:
代码实现:
1、隐藏的列需要用“display:none
”且“width="-1"
”;否则不起作用
2、v-if="false"
,会隐藏表格,但隐藏的同时也不能导出了
3、只给出关键代码
4、导出表格若重复见笔者收藏
(1)template代码
<el-button @click="exportExcel('indexData', '综合得分及评定等次列表')" size="small" v-if="isRelease">导出明细</el-button>
<el-table id="indexData" size="small" :data="tableData" border style="width:1080px;margin-top: 10px">
<el-table-column type="index" label="序号" align="center" width="80px"></el-table-column>
<el-table-column prop="sjName" label="姓名" align="center" width="300px"></el-table-column>
<el-table-column prop="sdkhScore" label="·····考核" align="center" width="100px"></el-table-column>
<el-table-column prop="bmpjScore" label="·····评价" align="center" width="100px"></el-table-column>
<el-table-column prop="dhcpScore" label="·····测评" align="center" width="100px"></el-table-column>
<el-table-column prop="totalScore" label="·····得分" align="center" width="130px">
<template slot-scope="scope">
<div v-if="isRelease">{{ scope.row.totalScore }}</div>
<el-input v-else type="number" placeholder="请输入综合得分" v-model="scope.row.totalScore"
@keyup.native="scope.row.totalScore = oninput(scope.row.totalScore)"></el-input>
</template>
</el-table-column>
<el-table-column prop="assess" label="评定等次" align="center" width="130px">
<template slot-scope="scope">
<div v-if="isRelease" v-for="(item, index) in EvaluationLevel" :key="item.value">
{{ item.value == scope.row.assess ? item.label : '' }}</div>
<el-select v-if="!isRelease" v-model="scope.row.assess" placeholder="请选择评定等次" :disabled="isRelease">
<el-option v-for="item in EvaluationLevel" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="问题清单" align="center" class-name="last_hidden" width="100px">
<template slot-scope="scope">
<el-button type="text" size="small" @click="openInfo(scope.row)">查看</el-button>
</template>
</el-table-column>
//隐藏的列需要用“display:none”且“width="-1"”;否则不起作用
//v-if="false",会隐藏表格,但隐藏的同时也不能导出了
<el-table-column label="问题清单" class-name="excel_show" width="-1">
<template slot-scope="scope">
<div>清单1</div>
<div>清单2</div>
<div>清单3</div>
</template>
</el-table-column>
</el-table>
(2)style代码
<style scoped lang="less">
//隐藏最后一列样式,行内样式不起作用
/deep/.excel_show {
display: none;
}
</style>
(3)script代码
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
name: "overallRatingsList",
data() {
return {}
},
methods: {
// 删除节点
remove(selectors) {
selectors.removeNode = [];
if (selectors.length != undefined) {
var len = selectors.length;
for (var i = 0; i < len; i++) {
console.log(selectors[i])
selectors.removeNode.push({
parent: selectors[i].parentNode,
inner: selectors[i]
});
}
for (var i = 0; i < len; i++)
selectors[i].remove();
}
else {
selectors.removeNode.push({
parent: selectors.parentNode,
inner: selectors
});
selectors.remove();
}
},
// 恢复节点
recover(selectors) {
var len = selectors.removeNode.length;
for (var i = 0; i < len; i++) {
var node = selectors.removeNode[i];
node.parent.appendChild(node.inner);
}
}
//定义导出Excel表格事件
exportExcel(id, title) {
let wb;
// 查询类名为“last_hidden”的节点
let fix = document.querySelectorAll('.last_hidden');
// 调用删除节点方法
this.remove(fix);
wb = XLSX.utils.table_to_book(document.querySelector("#" + id));
/* 获取二进制字符串作为输出 */
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
// 调用恢复节点方法
this.recover(fix);
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: "application/octet-stream" }),
//设置导出文件名称
title + new Date() + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
},
}
更多推荐
已为社区贡献2条内容
所有评论(0)