element 导入导出，下载导入模板电子表格，vue实现

红色红色方块内是要实现的功能

HTML代码（均为element标签）

          <div class="done" @click="download">
            <a >下载导入模板</a>
          </div>
          <div class="leading-out">
            <el-button type="info" @click="exportBtn">
              <div class="svg"></div>
              <span>导出</span>
            </el-button>
          </div>
          <div class="leading-in">
            <!-- 导入员工信息 -->
            <el-upload
              class="upload-demo"
              with-credentials: true
              action="http://csn.matrixair.cn/RBus/importStaff"//后端给的导入表格地址
              :on-progress="progress"
              :on-success="importStaff"
              :limit="3"
              :file-list="fileList"
              :show-file-list="false"
              accept=".xlsx, .xls"
              with-credentials
            >
              <el-button type="info" plain class="import">
                <span class="text">导入乘客</span>
              </el-button>
            </el-upload>
          </div>

data中定义数组

 fileList: [] ,// 上传文件列表
  staffIds: [],

methods中写入

// 上传文件的钩子
progress(event, file, fileList) {
  if (event.isTrusted === true) {
  } else {
    this.$message({
      message: "上传失败,请重新上传!",
      type: "error",
      offset: 100,
      customClass: "message-index",
    });
  }
},
// 下载导入模板
download() {
  window.location.href =//后端给的导入表格地址
    "http://csn.matrixair.cn/file/sbus/excel/员工信息模板.xls";
},
// 导入成功
importStaff(response, file, fileList) {
   if (response.code === 0) {
      var text = "";
      this.$confirm(
        `上传成功!`,
        "提示",
        {
          showCancelButton: false,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {})
        .catch(() => {});
      this.getstaffList();
    } else {
      this.$confirm('【上传失败】', "提示", {
        confirmButtonText: "下载",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          window.location.href = response.exceUploadUrl;
        })
        .catch(() => {});
    }
    // 清空上传列表
    this.fileList = [];
},
// 导出
exportBtn() {
  if (this.tables.length === 0 && this.staffIds.length === 0) {//判断列表是否为空
    this.$message.closeAll();
    this.$message({
      message: "没有数据可供导出!",
      type: "warning",
      offset: 100,
      customClass: "message-index",
    });
  } else {
    var device;
    if (this.staffIds.length > 0) {
      device = this.staffIds.join(",");
    } else {
      device = this.tables.map((ele) => {
        return ele.staffId;//接口表格id值
      });
    }
    var data = {
      staffIds: device,
    };
    exporApi.exportExcel(data, "staffRecordExcel");//导出表格接口
  }
},

我的表格el-table 属性

  <el-table
           ref="multipleTable"
          :data="pageData"
          style="width: 100%"
          :row-style="{ height: '40px' }"
          :cell-style="{ padding: '0px' }"
          :header-row-style="{ height: '40px' }"
          :header-cell-style="{ padding: '5px' }"
          :height="tableHeight"
          v-loading="tableLoading"
          @selection-change="handleSelectionChange"
          @select-all="selectAll"
          :row-key="(row)=>{ return row.uid}"
          highlight-current-row
          element-loading-background="#001021"
        >