<!-- 上傳文件按鈕 -->
   <div class="buttonBox">
     <el-upload
       action
       accept=".xlsx, .xls"
       :auto-upload="false"
       :show-file-list="false"
       :on-change="handle"
     >
       <el-button type="primary" slot="trigger">選取EXCEL文件</el-button>
     </el-upload>

     <el-button type="success" @click="submit" :disabled="disable">采集數(shù)據(jù)提交</el-button>
   </div>

   <!-- 解析出來的數(shù)據(jù) -->
   <div class="tableBox" v-show="show">
     <h3>
       <i class="el-icon-info"></i>
       小主，以下是采集完成的數(shù)據(jù)，請您檢查無誤后，點擊“采集數(shù)據(jù)提交”按鈕上傳至服務器哦！
     </h3>

     <el-table :data="tempData" style="width: 100%" :height="height" border>
       <el-table-column prop="name" label="姓名" min-width="50%"></el-table-column>
       <el-table-column prop="phone" label="電話" min-width="50%"></el-table-column>
     </el-table>
   </div>

// 把文件按照二進制進行讀取
export function readFile(file) {
    return new Promise(resolve => {
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = ev => {
             resolve(ev.target.result);
        };
    });
 }

  //讀取FILE中的數(shù)據(jù)（變?yōu)镴SON格式）
  let data = await readFile(file);
  let workbook = xlsx.read(data, { type: "binary" }),
    worksheet = workbook.Sheets[workbook.SheetNames[0]];
  data = xlsx.utils.sheet_to_json(worksheet);
  // 打印結果加下圖
  console.log(workbook);

// 字段對應表
    export let character = {
        name: {
            text: "姓名",
            type: 'string'
        },
        phone: {
            text: "電話",
            type: 'string'
        }
    };

   let arr = [];
    data.forEach(item => {
        let obj = {};
        for (let key in character) {
          if (!character.hasOwnProperty(key)) break;
          let v = character[key],
            text = v.text,
            type = v.type;
          v = item[text] || "";
          type === "string" ? (v = String(v)) : null;
          type === "number" ? (v = Number(v)) : null;
          obj[key] = v;
        }
      arr.push(obj);
    });

    // 提交數(shù)據(jù)給服務器
    async submit() {
      if (this.tempData.length <= 0) {
        this.$message({
          message: "小主，請您先選擇EXCEL文件！",
          type: "warning",
          showClose: true
        });
        return;
      }

      this.disable = true;
      let loadingInstance = Loading.service({
        text: "小主，請您稍等片刻，奴家正在玩命處理中！",
        background: "rgba(0,0,0,.5)"
      });

      // 完成后處理的事情
      let complate = () => {
        this.$message({
          message: "小主，奴家已經幫您把數(shù)據(jù)上傳了！",
          type: "success",
          showClose: true
        });
        this.show = false;
        this.disable = false;
        loadingInstance.close();
      };

      // 需要把數(shù)據(jù)一條條傳遞給服務器
      let n = 0;
      let send = async () => {
        if (n > this.tempData.length - 1) {
          // 都傳遞完了
          complate();
          return;
        }
        let body = this.tempData[n];
        // 走接口
        let result = await createAPI(body);
        if (parseInt(result.code) === 0) {
          // 成功
          n++;
        }
        send();
      };
      send();
    }

  <div class="container">
    <!-- 上傳按鈕 -->
    <div class="buttonBox">
      <router-link to="/upload">
        <el-tooltip content="EXCEL數(shù)據(jù)采集" placement="top">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
        </el-tooltip>
      </router-link>
    </div>

    <!-- 搜索區(qū)域 -->
    <div class="searchBox">
      <el-input v-model="search" placeholder="基于姓名、手機模糊搜索" @change="searchHandle"></el-input>
      <el-button type="success" @click="submit" :disabled="disabled">導出選中的數(shù)據(jù)</el-button>
    </div>

    <!-- 列表區(qū)域 -->
    <div class="tableBox">
      <el-table
        :data="tableData"
        :height="height"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="小主，奴家正在努力加載中..."
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="id" label="編號" min-width="10%"></el-table-column>
        <el-table-column prop="name" label="姓名" min-width="20%"></el-table-column>
        <el-table-column prop="phone" label="電話" min-width="20%"></el-table-column>
        <el-table-column prop="time" label="創(chuàng)建時間" min-width="25%" :formatter="formatter"></el-table-column>
      </el-table>
    </div>

    <!-- 分頁區(qū)域 -->
    <div class="pageBox">
      <el-pagination
        background
        hide-on-single-page
        layout="total, sizes, prev, pager, next"
        :page-size="pageSize"
        :current-page="page"
        :total="total"
        @size-change="sizeChange"
        @current-change="prevNext"
        @prev-click="prevNext"
        @next-click="prevNext"
      ></el-pagination>
    </div>
  </div>

    // 導出數(shù)據(jù)
    submit() {
      if (this.selectionList.length <= 0) {
        this.$message({
          message: "小主，請您先選擇要導出的數(shù)據(jù)哦！",
          type: "warning",
          showClose: true
        });
        return;
      }

      this.disabled = true;
      let loadingInstance = Loading.service({
        text: "小主，請您稍等片刻，奴家正在玩命處理中...",
        background: "rgba(0,0,0,.5)"
      });

      let arr = this.selectionList.map(item => {
        return {
          編號: item.id,
          姓名: item.name,
          電話: item.phone
        };
      });
      // 將json數(shù)據(jù)變?yōu)閟heet數(shù)據(jù)
      let sheet = xslx.utils.json_to_sheet(arr),
      // 新建表格
        book = xslx.utils.book_new();
      // 在表格中插入一個sheet
      xslx.utils.book_append_sheet(book, sheet, "sheet1");
      // 通過xlsx的writeFile方法將文件寫入
      xslx.writeFile(book, `user${new Date().getTime()}.xls`);

      loadingInstance.close();
      this.disabled = false;
    }