antdesign导出excel

1先在table中找到选择和操作中的框
在table中绑定row-selection

 <a-table
      :columns="columns"
      :data-source="list"
       rowKey="id"
      :row-selection="{selectedRowKeys, onChange: onSelectChange}"
      :pagination="false"
    >

computed中返回这个对象

computed: {
    rowSelection(){ 
        return {selectedRowKeys: selectedRowKeys, onChange: onSelectChange}
    }
  },

在data中定义一个属性：selectedRowKeys: [], 在methods中定义一个方法

   onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },

此时页面出现选择框且可选
页面中画出一个按钮并且只有当用户选择时按钮才能点击,即selectedRowKeys的数组长度为0时不允许点击

  <a-button
        icon="file-excel"
        :disabled="selectedRowKeys.length===0"
        style="margin: 10px 0;float: right;"
      >
        导出excel
  </a-button>

这里最好给按钮一个loading效果，增加用户体验

  <a-button
        icon="file-excel"
        :disabled="selectedRowKeys.length===0"
        style="margin: 10px 0;float: right;"
        :loading="downloading"
        @click="handleExport"
      >
        导出excel
      </a-button>
      
      //在data中绑定loading
       data() {
    return {
      downloading:false,

下载两个包来完成导出excel功能npm i xlsx file-saver -S 参考vue-element-admin-master里的此功能,在组件中将Export2Excel.js这个脚本(此为admin作者进一步封装带代码)放入utils文件夹中，由于此功能不是加载页面就调用，所以写在handleExport这个方法中，即点击导出excel按钮，此时再引入这个脚本文件，调用这个功能

    async handleExport() {
      this.downloading=true
      let { export_json_to_excel } = await import("@/utils/Export2Excel.js");
      //Export2Excel.js文件下导出的一个方法
      let  tHeader=['编号','电话'] //导出数据生成excel文件的表头
      let keys=['id','tel',]//自定义上传excel数据的表头
      let data=this.list.map((item) => {//将数据转为二维数组并筛选只包含这两个值得元素
           return keys.map(key=>item[key])
       })

      export_json_to_excel({
        header: tHeader, //表头 必填
        data, //具体数据 必填必须是一个二维数组
        filename: "试听申请人员", //导出的excel文件名
      });
      this.downloading=false
    },

由此即可生成xlsx文件