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: "已取消导出",
          });
        });
    },