0.0.3 • Published 10 months ago
el-table-export-excel v0.0.3
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页面：
导出：
