需求:导出如下图所示的表格,但最后【查看】一列不导出,还需导出未展示的一列

在这里插入图片描述

效果图如下:

在这里插入图片描述

代码实现
1、隐藏的列需要用“display:none”且“width="-1"”;否则不起作用
2、v-if="false",会隐藏表格,但隐藏的同时也不能导出了
3、只给出关键代码
4、导出表格若重复见笔者收藏

(1)template代码

<el-button @click="exportExcel('indexData', '综合得分及评定等次列表')" size="small" v-if="isRelease">导出明细</el-button>
<el-table id="indexData" size="small" :data="tableData" border style="width:1080px;margin-top: 10px">
        <el-table-column type="index" label="序号" align="center" width="80px"></el-table-column>
        <el-table-column prop="sjName" label="姓名" align="center" width="300px"></el-table-column>
        <el-table-column prop="sdkhScore" label="·····考核" align="center" width="100px"></el-table-column>
        <el-table-column prop="bmpjScore" label="·····评价" align="center" width="100px"></el-table-column>
        <el-table-column prop="dhcpScore" label="·····测评" align="center" width="100px"></el-table-column>
        <el-table-column prop="totalScore" label="·····得分" align="center" width="130px">
          <template slot-scope="scope">
            <div v-if="isRelease">{{ scope.row.totalScore }}</div>
            <el-input v-else type="number" placeholder="请输入综合得分" v-model="scope.row.totalScore"
              @keyup.native="scope.row.totalScore = oninput(scope.row.totalScore)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="assess" label="评定等次" align="center" width="130px">
          <template slot-scope="scope">
            <div v-if="isRelease" v-for="(item, index) in EvaluationLevel" :key="item.value">
              {{ item.value == scope.row.assess ? item.label : '' }}</div>
            <el-select  v-if="!isRelease" v-model="scope.row.assess" placeholder="请选择评定等次" :disabled="isRelease">
              <el-option v-for="item in EvaluationLevel" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="问题清单" align="center" class-name="last_hidden" width="100px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openInfo(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        //隐藏的列需要用“display:none”且“width="-1"”;否则不起作用
        //v-if="false",会隐藏表格,但隐藏的同时也不能导出了
        <el-table-column label="问题清单" class-name="excel_show" width="-1">
          <template slot-scope="scope">
            <div>清单1</div>
            <div>清单2</div>
            <div>清单3</div>
          </template>
        </el-table-column>
 </el-table>

(2)style代码

<style scoped lang="less">
	//隐藏最后一列样式,行内样式不起作用
	/deep/.excel_show {
	  display: none;
	}
</style>

(3)script代码

import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
  name: "overallRatingsList",
  data() {
  	return {}
  },
  methods: {
   	// 删除节点
    remove(selectors) {
      selectors.removeNode = [];
      if (selectors.length != undefined) {
        var len = selectors.length;
        for (var i = 0; i < len; i++) {
          console.log(selectors[i])
          selectors.removeNode.push({
            parent: selectors[i].parentNode,
            inner: selectors[i]
          });
        }
        for (var i = 0; i < len; i++)
          selectors[i].remove();
      }
      else {
        selectors.removeNode.push({
          parent: selectors.parentNode,
          inner: selectors
        });
        selectors.remove();
      }
    },
    // 恢复节点
    recover(selectors) {
      var len = selectors.removeNode.length;
      for (var i = 0; i < len; i++) {
        var node = selectors.removeNode[i];
        node.parent.appendChild(node.inner);
      }
    }
    //定义导出Excel表格事件
    exportExcel(id, title) {
      let wb;
      // 查询类名为“last_hidden”的节点
      let fix = document.querySelectorAll('.last_hidden');
      // 调用删除节点方法
      this.remove(fix);
      
      wb = XLSX.utils.table_to_book(document.querySelector("#" + id));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      
      // 调用恢复节点方法
      this.recover(fix);

      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          title + new Date() + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  }
Logo

前往低代码交流专区

更多推荐