Vue中el-table使用
<el-card class="result_panel_se" >
<div class="result_container_se" style="min-height: 100px">
<el-table id='resTable' :data="tableData" style="width:90%">
<el-table-column fixed prop="createTime" label="日期" width="100" ></el-table-column>
<el-table-column fixed prop="xx" label="xx" width="60"></el-table-column>
</el-table>
</div>
</el-card>
Vue部分
new Vue({
el: '#resTable',
data() {
return {
tableData:tData
}
}
});
xlsx/FileSaver实现导出excel
引入
<script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.full.min.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
实现
function getExcel() {
var wb = XLSX.utils.table_to_book(document.querySelector('#resTable'))
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'order.xlsx')
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
}
注意
1. 如果表格有fixed的,可能会导致下载的Excel有重复的数据,去除fixed即可,也有其他处理办法。