需求：導(dǎo)出如下圖所示的表格，但最后【查看】一列不導(dǎo)出，還需導(dǎo)出未展示的一列

2.png

效果圖如下：

3.png

代碼實現(xiàn)：
1、隱藏的列需要用“display:none”且“width="-1"”；否則不起作用
2、v-if="false",會隱藏表格，但隱藏的同時也不能導(dǎo)出了
3、只給出關(guān)鍵代碼
4、導(dǎo)出表格若重復(fù)見筆者收藏

（1）template代碼

<el-button @click="exportExcel('indexData', '綜合得分及評定等次列表')" size="small" v-if="isRelease">導(dǎo)出明細</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",會隱藏表格，但隱藏的同時也不能導(dǎo)出了
        <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">
    //隱藏最后一列樣式，行內(nèi)樣式不起作用
    /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: {
    // 刪除節(jié)點
    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();
      }
    },
    // 恢復(fù)節(jié)點
    recover(selectors) {
      var len = selectors.removeNode.length;
      for (var i = 0; i < len; i++) {
        var node = selectors.removeNode[i];
        node.parent.appendChild(node.inner);
      }
    }
    //定義導(dǎo)出Excel表格事件
    exportExcel(id, title) {
      let wb;
      // 查詢類名為“l(fā)ast_hidden”的節(jié)點
      let fix = document.querySelectorAll('.last_hidden');
      // 調(diào)用刪除節(jié)點方法
      this.remove(fix);
      
      wb = XLSX.utils.table_to_book(document.querySelector("#" + id));
      /* 獲取二進制字符串作為輸出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      
      // 調(diào)用恢復(fù)節(jié)點方法
      this.recover(fix);

      try {
        FileSaver.saveAs(
          //Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。
          //Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。
          //File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。
          //返回一個新創(chuàng)建的 Blob 對象，其內(nèi)容由參數(shù)中給定的數(shù)組串聯(lián)組成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //設(shè)置導(dǎo)出文件名稱
          title + new Date() + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  }