vue + ant-design-vue下载excel表格、填写内容上传excel文件并展示

这是最初的页面样子，因为模板文件后期会改变，所以要请求接口下载并填写，没有数据的时候发放按钮是禁用的

<template>
  <div>
    <a-spin tip="Loading..." :spinning="isLoading">
      <section class="upload-police-serach-container">
        <div style="display: flex; align-items: center">
          <div class="input-line">
            <div>请选择文件:</div>
            <!-- multiple:是否支持多选；action：上传地址；method：请求方法；headers：设置上传的请求头部 -->
            <a-upload
              style="display: flex; margin: 5px"
              name="file"
              :multiple="false"
              :action="uploadUrl"
              method="put"
              :headers="headers"
              @change="uploadFile"
            >
              <a-button type="primary">
                <a-icon type="upload" /> 上传文件
              </a-button>
            </a-upload>
          </div>

          <a @click="downloadExecl">点击此处下载模版</a>
          <a-button
            style="
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin-left: 15px;
            "
            :disabled="btnState"
            @click="grantCoupon"
            type="primary"
          >
            发放
          </a-button>
        </div>
      </section>
      <!-- 人员列表 -->
      <!-- bordered:是否展示外边框和列边框；file-list:已经上传的文件列表 -->
      <a-table
        class="table"
        bordered
        row-key="key"
        :columns="uploadColumns"
        :data-source="uploadData"
        :pagination="false"
        :file-list="fileList"
      >
      </a-table>
    </a-spin>
  </div>
</template>

data() {
    return {
      isLoading: false,
      //是否禁用按钮
      btnState: true,
      //传给后台的列表数据
      list: [],
      //上传的数据
      uploadData: [],
      //文件数据
      fileList: [],
      //上传文件地址
      uploadUrl: `https://xxxxx.com/xxxxxxx`,
      //上传文件请求头
      headers: {
        authorization: "authorization-text",
      },
      uploadColumns: [
        {
          dataIndex: "sort",
          key: "sort",
          title: "序号",
        },
        {
          dataIndex: "type",
          key: "type",
          title: "使用类型",
        },
        {
          dataIndex: "name",
          key: "name",
          title: "姓名",
        },
        {
          dataIndex: "phone",
          key: "phone",
          title: "手机号",
        },
        {
          dataIndex: "count",
          key: "count",
          title: "使用次数",
        },
        {
          dataIndex: "paytime",
          key: "paytime",
          title: "使用时间",
        },
      ],
    }
  },

这是下载完成好的excel模板，数据我随便写了几个

然后我们点击上传文件，随后将数据展示到表格中（上传完成有数据后记得把按钮的禁用改为false）

//下载录入模板
    downloadExecl() {
      window.open(
        `https://xxxxx.com/xxxxxx`,
        "_blank"
      );
    },
    //上传文件
    uploadFile(info) {
      console.log(info)
      this.fileList = info.fileList
      // this.uploadData.splice(0)
      //如果没有数据
      if(info.file.response && info.file.response.data ==null){
        this.btnState = true
      }
      // 有数据并且填写正确
      if(info.file.response && info.file.response.data != null){
        this.btnState = false
        // this.fileList.splice(0)
        info.file.response.data.forEach((item, index) => {
          //对列表数据转义赋值
          this.$set(this.uploadData,index, {
            key: index.toString(),
            sort: index + 1,
            id: item.userId,
            phone: item.mobile,
            name: item.name,
            type: item.type,
            count: item.number,
            paytime: `${item.beginData}-${item.endData}`,
          })
        })
        this.list = info.file.response.data
        console.log(this.uploadData)
      }else if(info.file.response && info.file.response.message != null && this.fileList.length > 0){
        // 如果填写错误
        console.log(info.file.response)
        // this.fileList.splice(0)
        const h = this.$createElement
        this.$error({
          title: "提醒",
          content:h('div', {}, [
            h('p', `${info.file.response.message}`),
            h('p', '请确认无误后重新上传'),
          ]),
        })

      }
    },

结果：第一张打印的是数据；第二张是展示的效果