Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

exportTable.vue 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <template>
  2. <div class="app-content">
  3. <el-button ref="hwcell" size="small" type="primary" @click="exportExcel" v-if="isShow">文件导出</el-button>
  4. <el-table :data="tableData" style="width: 100%" border>
  5. <el-table-column type="index" label="序号" width="60" />
  6. <el-table-column prop="etcCardNumber" label="ETC卡号" width="145" />
  7. <el-table-column prop="licensePlateNumber" label="车牌号" width="100" />
  8. <el-table-column prop="consumptionType" label="消费类型" width="90" />
  9. <el-table-column prop="entranceTime" label="入口时间" width="110" />
  10. <el-table-column prop="entryStationName" label="入口站名" width="110" />
  11. <el-table-column prop="exportTime" label="出口时间" width="110" />
  12. <el-table-column prop="exitStationName" label="出口站名" width="110" />
  13. <el-table-column prop="balanceBeforeTransaction" label="交易前余额(元)" width="140" />
  14. <el-table-column prop="transactionAmount" label="交易金额(元)" width="125" />
  15. <el-table-column prop="postransactionalance" label="交易后余额(元)" width="140" />
  16. </el-table>
  17. </div>
  18. </template>
  19. <script>
  20. import * as XLSX from "xlsx";
  21. export default {
  22. data() {
  23. return {
  24. isShow:false,
  25. fileData: "" ,// 保存选择的文件数据,
  26. tableData:[
  27. {
  28. etcCardNumber: '52011328220200481698',
  29. licensePlateNumber: '贵A710AE',
  30. consumptionType: '省内流水',
  31. entranceTime: '2019-12-27 20:14:02',
  32. entryStationName: '贵阳西主线站',
  33. exportTime: '2019-12-27 20:18:20',
  34. exitStationName: '贵阳西主线站',
  35. balanceBeforeTransaction: '38.25',
  36. transactionAmount: '0.00',
  37. postransactionalance: '38.25',
  38. },
  39. {
  40. etcCardNumber: '52011328220200481698',
  41. licensePlateNumber: '贵A710AE',
  42. consumptionType: '省内流水',
  43. entranceTime: '2019-12-27 20:14:02',
  44. entryStationName: '贵阳西主线站',
  45. exportTime: '2019-12-27 20:18:20',
  46. exitStationName: '贵阳西主线站',
  47. balanceBeforeTransaction: '38.25',
  48. transactionAmount: '0.00',
  49. postransactionalance: '38.25',
  50. },
  51. {
  52. etcCardNumber: '52011328220200481698',
  53. licensePlateNumber: '贵A710AE',
  54. consumptionType: '省内流水',
  55. entranceTime: '2019-12-27 20:14:02',
  56. entryStationName: '贵阳西主线站',
  57. exportTime: '2019-12-27 20:18:20',
  58. exitStationName: '贵阳西主线站',
  59. balanceBeforeTransaction: '38.25',
  60. transactionAmount: '0.00',
  61. postransactionalance: '38.25',
  62. },
  63. {
  64. etcCardNumber: '52011328220200481698',
  65. licensePlateNumber: '贵A710AE',
  66. consumptionType: '省内流水',
  67. entranceTime: '2019-12-27 20:14:02',
  68. entryStationName: '贵阳西主线站',
  69. exportTime: '2019-12-27 20:18:20',
  70. exitStationName: '贵阳西主线站',
  71. balanceBeforeTransaction: '38.25',
  72. transactionAmount: '0.00',
  73. postransactionalance: '38.25',
  74. },
  75. {
  76. etcCardNumber: '52011328220200481698',
  77. licensePlateNumber: '贵A710AE',
  78. consumptionType: '省内流水',
  79. entranceTime: '2019-12-27 20:14:02',
  80. entryStationName: '贵阳西主线站',
  81. exportTime: '2019-12-27 20:18:20',
  82. exitStationName: '贵阳西主线站',
  83. balanceBeforeTransaction: '38.25',
  84. transactionAmount: '0.00',
  85. postransactionalance: '38.25',
  86. },
  87. {
  88. etcCardNumber: '52011328220200481698',
  89. licensePlateNumber: '贵A710AE',
  90. consumptionType: '省内流水',
  91. entranceTime: '2019-12-27 20:14:02',
  92. entryStationName: '贵阳西主线站',
  93. exportTime: '2019-12-27 20:18:20',
  94. exitStationName: '贵阳西主线站',
  95. balanceBeforeTransaction: '38.25',
  96. transactionAmount: '0.00',
  97. postransactionalance: '38.25',
  98. },
  99. ]
  100. };
  101. },
  102. create() {
  103. console.log(XLSX);
  104. },
  105. methods: {
  106. //导出文件
  107. exportExcel() {
  108. if (!this.tableData.length) {
  109. this.$message.warning("暂无数据导出");
  110. return false;
  111. }
  112. import("@/utils/Export2Excel").then(excel => {
  113. //导出表格头部内容(要与下面字段对照)
  114. const tHeader = ['ETC卡号', '车牌号', '消费类型', '入口时间', '入口站名', '出口时间', '出口站名', '交易前余额(元)', '交易金额(元)', '交易后金额(元)'];
  115. const filterVal = [ "etcCardNumber", "licensePlateNumber", "consumptionType", "entranceTime", "entryStationName", "exportTime", "exitStationName", "balanceBeforeTransaction", "transactionAmount", "postransactionalance"];
  116. const data = this.formatJson(filterVal);
  117. //保存excel
  118. excel.export_json_to_excel({
  119. header: tHeader,
  120. data,
  121. //导出的文件名
  122. filename: "通行流水数据表"
  123. });
  124. });
  125. },
  126. //格式转换
  127. formatJson(filterVal) {
  128. return this.tableData.map(v =>
  129. // obj = {
  130. // name:'',
  131. // age:''
  132. // }
  133. filterVal.map(j => {
  134. // obj[name]
  135. // obj[age]
  136. console.log(v[j]);
  137. return v[j];
  138. })
  139. );
  140. // [[name,age],[name,age],[name,age]]
  141. },
  142. }
  143. };
  144. </script>
  145. <style>
  146. </style>