el-table-export-excel

vue2 element-ui 表格一键导出excel，依赖xlsx+xlsx-js-style

只需传入数据 自动根据页面表格样式导出 在线demo

用法

使用方法（引入文件：src/components/exportTableExcel.vue）需安装依赖：xlsx，xlsx-js-style

或npm安装 npm i el-table-export-excel --save

import ExportTableExcel from "@/components/exportTableExcel.vue";

<!--导出组件-->
<export-table-excel
    :parent="this"
    :data-list="data"
    :ignore="['操作']"
    :formatter="{
        col6:(val)=>val===1?'在线':'离线'
    }"
    export-name="测试数据导出"
/>

<!-- 测试el-table -->
<!-- data = [ { abc: 'text1', col6:0 }, { abc: 'text2', col6:1 } ] -->
<el-table :data="data">
    <el-table-column label="序号" type="index" width="80"/>
    <el-table-column label="第一列" prop="abc" :formatter="(row)=>row.abc+'+尾巴'"/>
    <el-table-column label="第二块" prop="abc">
      <el-table-column label="第二列" prop="abc"/>
      <el-table-column label="第三块" prop="abc">
        <el-table-column label="第三列" prop="abc"/>
        <el-table-column label="第四列" prop="abc"/>
      </el-table-column>
      <el-table-column label="第五列" prop="abc"/>
    </el-table-column>
    <el-table-column label="第六列" prop="col6">
      <template #default="{row}">
        <el-tag v-if="row.col6 === 1" type="primary" size="small">在线</el-tag>
        <el-tag v-else type="info" size="small">离线</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <el-button type="primary" size="small">编辑</el-button>
      <el-button type="danger" size="small">删除</el-button>
    </el-table-column>
</el-table>

组件参数

| 参数 | 类型 | 说明 | 默认值 | |-----------------------|---------|--------------------------------|----------| | type | String | 导出数据类型 | data | | parent | Object | 表格所在组件this(必传用于获取表格) | | | dataList | Array | 导出数据数组 | | | exportName | String | 导出文件名 | 数据导出 | | ignore | Array | 需要忽略列的label数组 | [] | | formatter | Object | 数据格式化{ prop:Function(value) } | | | elTableTag | String | 表格的tag(el-table-column的父组件tag) | el-table | | headerBackgroundColor | String | 导出表头背景色 | #D9D9D9 |

效果图

web页面： 导出：