在element table中导出指定列信息

问题：

　　这是今年在项目中遇到的一个需求，并且之前有个博客园的伙伴也问到过，当时很忙，没仔细去思考过，现在工作轻松一点了，写个总结，当是一个小笔记吧

思路及原理：

　　之前的导出我们在页面中设置了两个el-table标签，table1用来展示数据，另外一个table2负责导出数据（隐藏）。要导出指定的列，我们可以做的地方就在于控制隐藏的table2的列是否存在，这里我们使用v-if来控制，因为v-show仅仅是把元素的display属性设置为none，列依然存在，导出的时候还是导出全部列数据，所以使用v-if

效果展示：

这是表格显示的数据，有很多列的内容，下面先导出全都内容

导出指定列数据：这里我随便勾选四个列导出

基本的效果就是上面这样的了，全部数据那里的涂黑的部分是一些信息数据，隐藏一些不影响啥的，下面就直接放代码了。

1、安装插件并引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

2、因为使用的地方比较多，所以我将导出功能封装成一个组件，方便引用，代码如下

HTML部分：

<div class="excel-export-page">
    <el-table v-show="false" id="exportTable" border height="300" :data="tableData">
      <template v-for="(item, index) in exportFeild.tableCol">
        <el-table-column
          v-if="item.checked"
          :key="index"
          :property="item.property"
          :label="item.colName"
        />
      template>
    el-table>
    <div class="export-dialog">
      <div style="display: flex;justify-content: space-between;align-items: center;">
        <span>页码span>
        <div style="display: flex;align-items: center;">
          <div>
            <el-input v-model="pageStart" style="width: 80px;" @change="pagesChange" />
          div>
          
          <span style="padding: 0 20px;">所有页span>
          <el-checkbox v-model="getMore" @change="exprotAll" />
        div>
      div>
      <div style="color: blue;">联机下载最大记录数为1000
        <span style="color: red;">(导出最大量数据请在空闲时操作)span>
      div>
      <div class="export-clomon-choice">
        <div v-for="(item, index) in exportFeild.tableCol" :key="index" class="export-row-style">
          <el-checkbox v-model="item.checked">{{ item.colName }}el-checkbox>
        div>
      div>
      <div class="export-btn-style">
        <el-button type="primary" size="mini" icon="el-icon-download" @click="getExportDt">导出el-button>
      div>
    div>
  div>

CSS部分：

.excel-export-page {
  width: 100%;
  padding: 20px;
}
.export-dialog {
  width: 100%;
}
.export-clomon-choice {
  height: 150px;
  border: 1px solid #AECAF0;
  overflow-y: scroll;
  margin-top: 2px;
  .export-row-style {
    border-top: 1px solid #ededed;
    padding-left: 10px;
  }
}
.export-btn-style {
  padding: 10px;
  display: flex;
  justify-content: center;
}

JS部分：

在指定页面引入导出组件：

        


import excelPage from '@/views/common/print/excel-export/index.vue'

components: { excelPage },
data() {
  return {
    exportFeild: {} // 传入到组件的对象
  }
}，
method: {
      // 导出到Excel,列表页导出按钮事件：
      printPDF() {
        if (this.tableData.length > 0) {
          this.exportDialog = true
          this.exportFeild = {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            total: this.total,
            tableCol: [
              { checked: true, colName: '业务编号', property: 'contNo' }, // 这里设置checked为true是默认勾选状态
              { checked: true, colName: '票据号码', property: 'drftNo' },
              { checked: true, colName: '票据来源', property: 'srcTyp', dictionaryFlag: true, dictionaryStr: 'srcTyp' },
              { checked: true, colName: '票据属性', property: 'drftAttr', dictionaryFlag: true, dictionaryStr: 'drftAttr' },
              { checked: true, colName: '票据种类', property: 'drftTyp', dictionaryFlag: true, dictionaryStr: 'drftTyp' },
              { checked: true, colName: '票据状态', property: 'drftStat', dictionaryFlag: true, dictionaryStr: 'drftStat' },
              { checked: true, colName: '票面金额(元)', property: 'isseAmt' },
              { checked: true, colName: '出票日', property: 'isseDt' },
              { checked: true, colName: '到期日', property: 'dueDt' },
              { checked: true, colName: '承兑人名称', property: 'accptrNm' },
              { checked: true, colName: '出票人名称', property: 'drwrNm' },
              { checked: true, colName: '出票人开户行名称', property: 'drwrBkNm' },
              { checked: true, colName: '收款人开户行名称', property: 'pyeeBkNm' },
              { checked: true, colName: '所属机构', property: 'orgId' },
              { checked: true, colName: '交易对手', property: 'custName' },
              { checked: true, colName: '经办人', property: 'jbStf' },
              { checked: true, colName: '交易日期', property: 'txnDt' }
            ],
            qryParams: this.qryParams,
            ck: 'CXGZCX001',
            exportFileName: '票据交易查询.xlsx'
          }
        } else {
          this.$alert('暂无数据', '提示', {
            confirmButtonText: '确定',
            confirmButtonClass: 'ticket-comfirm-btn',
            callback: () => {}
          })
        }
      }     
}

最后组件引入这里的代码我就丢在一个框里展示了，偷懒一下

总结：其实思路的才是重点，之前小伙伴问怎么做导出指定列内容的时候一时间没想到，还特意去搜了下有没有特定的插件可以处理，没找到，后面工作遇到了，仔细想想原理，然后一边修改一边测就出来了，所以写出来当个笔记，也许会帮助到遇到导出指定内容问题的其他小伙伴，当是一个思路上的提示吧。