liuyg
2021-07-17 f640ed9e0b1ae5ba002ef5ffe99fdb00b77d8a86
src/views/securityUnitOperation/operationTable.vue
New file
@@ -0,0 +1,77 @@
<template>
  <div class="table1">
    <div class="about">
      <el-button @click="downExcel">下载</el-button>
      <el-table id="table" :data="tableData" stripe 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>
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
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 弄"
        }
      ]
    };
  },
  methods: {
    downExcel() {
      let et = XLSX.utils.table_to_book(document.getElementById("table"));
      let etout = XLSX.write(et, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([etout], {
            type: "application/octet-stream"
          }),
          `表.xlsx`
        ); //导出的文件名
      } catch (e) {
        console.log(e, etout);
      }
      return etout;
    }
  },
  mounted() {}
};
</script>
<style>
.table1 {
  height: 100%;
  width: 1005;
  display: none;
}
</style>