element中選擇表格資料導出excel

一、前言

批量選擇導出人員花名冊資訊

三、效果展示

四、實作步驟

前提:使用兩個表格的原因是因為展示表格使用的資料是分頁,而導出的資料是使用背景的不分頁資料

1.使用兩個表格,一個作為展示資料

2.一個作為導出資料給隐藏起來

3.在一進入這個頁面的時候就調用兩個接口把兩個表格給渲染出來

4.在不選中表格資料的前提下點選導出資料,是把隐藏表格的資料給全部導出

5.點選表格資料的多個選中和篩選出對應的内容就是把擷取到的資料傳給隐藏的表格,然後再導出/.

五、編碼實作

1.表格展示資料

<!-- 展示表格 -->
 <el-table
        ref="tableData"
        :data="tableData"
        id="tableId"
        style="width: 100%; margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column  prop="ciName"  label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ciGender" label="性别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ciCard" label="身份證号" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="ciTel" label="聯系電話" show-overflow-tooltip> </el-table-column>        
        <el-table-column prop="date" label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="look(scope.row)">詳情</el-button>        
          </template>
        </el-table-column>
      </el-table>
           

2.導出資料專用表格

<!-- 導出資料專用表格 -->
      <el-table
        :data="selectList"
        id="exportData"
        tooltip-effect="dark"
        v-show="false"
      >
      //把導出資料的表格給隐藏
         <el-table-column  prop="ciName"  label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ciGender" label="性别" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ciCard" label="身份證号" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="ciTel" label="聯系電話" show-overflow-tooltip> </el-table-column>
      </el-table>
           

3.請求接口擷取兩個表格資料

//展示分頁資料
      let data = await pagingData(params);
      let datainfo = data.data;
      this.tableData = datainfo.tableList;
      this.total = datainfo.tableTotal;
 //導出表格資料     
	   let leadingOut = await exportData(leadOut);
	   this.selectList = leadingOut.data;
	   console.log("我是導出的全部資料", this.selectList, leadingOut);
           

4.在表格選中事件中給隐藏表格指派

//表格選中事件回調
    handleSelectionChange(val) {
      //選中批量導出的 給導出專用表格指派資料
      this.selectList = val; //選中資料
    },
           

5.導出資訊按鈕

<el-button @click="downloadExcel">導出人員</el-button>
           

6.導出事件

//導出人員excel表
    downloadExcel() {
      this.$confirm("是否導出全部人員資訊?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var xlsxParam = { raw: true }; // 導出的内容隻做解析，不進行格式轉換
          //下面兩個是資料是否重複的操作,用哪個,适情況而定
          let fix = document.querySelector(".el-table__fixed"); 
          // let fix = document.querySelector(".el-table__fixed-right"); 
          let wb;
          if (fix) {
            //判斷要導出的節點中是否有fixed的表格，如果有，轉換excel時先将該dom移除，然後append回去
            wb = XLSX.utils.table_to_book(
              document.querySelector("#exportData").removeChild(fix),
              xlsxParam
            );
            document.querySelector("#exportData").appendChild(fix);
          } else {
            wb = XLSX.utils.table_to_book(
              document.querySelector("#exportData"),
              xlsxParam
            );
          }
          var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array",
          });
          try {
            FileSaver.saveAs(
              new Blob([wbout], { type: "application/octet-stream" }),
              "人員資訊.xlsx"
            );
          } catch (e) {
            if (typeof console !== "undefined") {
            }
          }
          return wbout;
          this.$message({
            type: "success",
            message: "導出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消導出",
          });
        });
    },