vue+elementUI做一个后台管理系统，其中表格最简单的导入导出功能。

//导出
//HTML
<el-table class="excelTable" :data="excelData" border v-show="false"> <el-table-column label="串码" prop="QMNO"></el-table-column> </el-table>
<el-button class="billButton" type="primary" @click="exportExcel">导出</el-button>
//方法
exportExcel () {
var wb = XLSX.utils.table_to_book(document.querySelector('.excelTable'))//需要导出的表格的节点
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出的Excel名字.xlsx')
} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
return wbout
},

//导入
//HTML
<vue-xlsx-table class="billButton" @on-select-file="importEXCEL" style="margin: 0 10px;">导入</vue-xlsx-table>

<el-dialog title="串码导入" :visible.sync="excelDialogVisible"> <el-table :data="excelTableData" border> <el-table-column label="串码" prop ="QMNO" show-overflow-tooltip></el-table-column> </el-table>
<span slot="footer" class="dialog-footer"> <el-button @click="excelDialogVisible = false">取消</el-button> <el-button type="primary" @click="excelCommit">确定</el-button> </span>
</el-dialog>
//导入
importEXCEL(data){
this.excelTableData = []
for(var item of data.body){
this.excelTableData.push({
QMNO:item.串码,
})
}
this.excelTableHeader = data.header
this.excelDialogVisible = true
},
//导入确定
excelCommit(){
this.passTable = this.passTable.concat(this.excelTableData)
this.excelDialogVisible = false
},