0.1.7 • Published 2 years ago
dc-vue-excel-export v0.1.7
vue_test
使用方法
main.js中
import excelExport from 'dc-vue-excel-export'
Vue.use(excelExport)
vue文件中
<template>
<div>
<export-excel :list="exportList" :tHeader="tHeader" filename="我导出的xecel" sheetName="sheet1"></export-excel>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
tHeader: ['日期', '姓名', '地址'],
tName: ['date', 'name', 'address'],
}
},
computed: {
exportList() {
return this.formatJson(this.tName, this.tableData)
},
},
watch: {},
methods: {
// 该方法负责将数组转化成二维数组
formatJson(headers, rows) {
// 首先遍历数组
// [{ username: '张三'},{},{}] => [[’张三'],[],[]]
return rows.map(item => {
return Object.keys(headers).map(key => {
return item[headers[key]]
})
})
},
},
created() {},
mounted() {
// console.log(this.formatJson(this.tName, this.tableData))
},
}
</script>
<style scoped></style>
注意事项
需安装 "element-ui",
"file-saver",
"xlsx"
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint