在vue Element-UI中使用tableExport导出table表格为空数据是怎么回事

Question

由于需要导出pdf格式和excel格式，发现tableExport格式很多就用这个，刚开始导出excel就发现导出的数据是空表格，里面一点数据都没有；
本来页面是这样展示的：（看如下图片）

导出表格后：（展出如下图）：

代码如下：

<template>
<div class="index">

<el-dropdown trigger="click">
  <el-button type="primary">
    导出<i class="el-icon-caret-bottom el-icon--right"></i>
  </el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="pdfTap">导出为 PDF</el-dropdown-item>
    <el-dropdown-item @click.native="xlsTap">导出为 XLS</el-dropdown-item>
    <el-dropdown-item @click.native="xlsxTap">导出为 XLSX</el-dropdown-item>
    <el-dropdown-item @click.native="pngTap">导出为 PNG</el-dropdown-item>
    <el-dropdown-item @click.native="txtTap">导出为 TXT</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
<!-- 表格 -->
<div class="tableBox">
    <el-table class="pvtTable" ref="table"  :data="tableData" fit border stripe style="width:auto;display:inline-block;">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="SHORT_NAME" label="项目组简称" width="120"></el-table-column>
        <el-table-column prop="FULL_NAME" label="项目组全程" width="120"></el-table-column>
        <el-table-column prop="SUBMIT_USER" label="申请人" width="100"></el-table-column>
        <el-table-column prop="NAME" label="脚本名称" width="130"></el-table-column>
        <el-table-column prop="SUBMIT_TIME" label="申请时间" width="170"></el-table-column>
    </el-table>
</div>

</div>
</template>
<script>

export default{
    data(){
        return{
            tableData:[
                {SHORT_NAME:'零售CRM',FULL_NAME:'零售CRM',SUBMIT_USER:'crm_it',NAME:"loan_acct.txt",SUBMIT_TIME:'2019-03-08 17:24:06'},
                {SHORT_NAME:'零售CRM',FULL_NAME:'零售CRM',SUBMIT_USER:'crm_it',NAME:"loan_acct.txt",SUBMIT_TIME:'2019-03-08 17:24:06'},
                {SHORT_NAME:'零售CRM',FULL_NAME:'零售CRM',SUBMIT_USER:'crm_it',NAME:"loan_acct.txt",SUBMIT_TIME:'2019-03-08 17:24:06'},
                {SHORT_NAME:'零售CRM',FULL_NAME:'零售CRM',SUBMIT_USER:'crm_it',NAME:"loan_acct.txt",SUBMIT_TIME:'2019-03-08 17:24:06'},
                {SHORT_NAME:'零售CRM',FULL_NAME:'零售CRM',SUBMIT_USER:'crm_it',NAME:"loan_acct.txt",SUBMIT_TIME:'2019-03-08 17:24:06'},
                {SHORT_NAME:'零售CRM',FULL_NAME:'零售CRM',SUBMIT_USER:'crm_it',NAME:"loan_acct.txt",SUBMIT_TIME:'2019-03-08 17:24:06'},
                {SHORT_NAME:'零售CRM',FULL_NAME:'零售CRM',SUBMIT_USER:'crm_it',NAME:"loan_acct.txt",SUBMIT_TIME:'2019-03-08 17:24:06'}
            ]
        }
    },
    methods:{
        xlsxTap() {
            
            $('.pvtTable').tableExport({type:'excel',fileName: new Date().getTime(),escap:false})
        },
    }
}

</script>

请问这个该怎么解决？

Answer 1

因为你用的el-table这个组件， $('.pvtTable')选中的不是table, $('.pvtTable .el-table__body-wrapper .el-table__body')选中的才是真正的table；