在vue中将el-table导出excel表格

1.安装依赖：npm install --save xlsx file-saver

2.在放置需要导出功能的组件中引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3.封装一个简单的导出组件

在src下components中创建ExportExcel.vue
将下面代码复制粘贴

4.将需要的页面

import ExportExcel from "@/components/ExportExcel.vue";
export default {
  components: {
    ExportExcel
  },
  props: {},
  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 弄",
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
   
  },
};

5.遇到问题

（一）如果存在分页，导出时却只导出当前table绑定的数据，假如我们设置的table每页只有10条数据，导出时只导出了10条，并非所有符合条件的数据

原因：此插件只导出当前table中所有的数据

解决办法：
1.在HTML代码中再加一个el-table标签，这个table专门用来导出数据，且此table一直隐藏着，当查询条件发生变化时，根据后台返回的所有符合条件的数据总量total值，然后重新设置获取后台数据方法的参数，拉取到所有符合条件的数据绑定进来，这样导出的就是想要的数据了。
（二）导出的数据出现两份的情况

原因：因为element ui下的el-table被渲染出来后有两个table标签，目的是方便进行数据交互使用，所以如果el-column存在fixed属性时，导出时会出现两份数据的情况

解决方法：我是参照上面大佬的文章，直接将隐藏table中的el-table-column上的fixed属性去掉，毕竟这个table是隐藏起来的，直接去掉el-table-column上的fixed属性最便捷