# 介绍
这是一个可以将页面中的表格数据导出为`Excel`文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成`Excel`文件。
# 使用方法
由于封装该组件内部引用了`xlsx.js`,`file-saver.js`和`elementUI`,因此在使用该组件时,请先安装如下依赖:
```shell
npm install xlsx file-saver element-ui --save
```
安装好依赖后,只需将该组件文件夹`ExportExcel`导入到现有项目中即可使用。
# 使用示例
```html
<template>
<div id="app">
<export-excel v-if="list !== null" :list="list" :tHeader="tHeader" :tValue="tValue"></export-excel>
</div>
</template>
<script>
import ExportExcel from './ExportExcel'
export default {
name: 'app',
components: { ExportExcel},
data() {
return {
list:null,
tHeader:['Id', '告警类型', '告警内容', '告警时间(段)', '告警次数'],
tValue:['id', 'type', 'content', 'time', 'count'],
}
}
}
</script>
```
# 选项
| 属性 | 描述 | 类型 | 是否必须 |
| :------: | :------------------: | :---: | :------: |
| list | 由后端返回的表格数据 | Array | 是 |
| tHeader | 导出的Excel文件表头标题 | Array | 是 |
| tValue | 要将表格数据中的哪些字段作为数据导出至Excel,与表头一一对应 | Array | 是 |
| filename | 导出的Excel文件名,默认为“导出数据.xlsx” | String | 否 |
# 选项说明
**关于选项中的`tHeader`和`tValue`说明如下:**
例如将如下表格数据导出成Exlcel:
![](https://img2018.cnblogs.com/blog/1460995/201812/1460995-20181218212516268-1558904696.png)
其中表头数据为:
![](https://img2018.cnblogs.com/blog/1460995/201812/1460995-20181218212526743-2067406424.png)
所以`tHeader`为:
```javascript
tHeader:['Id', '告警类型', '告警内容', '告警时间(段)', '告警次数']
```
后端返回的表格数据`list`为:
```json
[
{
"id":1,
"type":"",
"content":"",
"time":"",
"count":"",
},
{
"id":2,
"type":"",
"content":"",
"time":"",
"count":"",
},
//....
]
```
其中:
- list中的id------->表头的ID
- list中的type------->表头的'告警类型'
- list中的content------->表头的'告警内容'
- list中的time------->表头的'告警时间(段)'
- list中的count------->表头的'告警次数'
所有`tValue`为:
```javascript
tValue:['id', 'type', 'content', 'time', 'count']
```
# 效果图
![](https://img2018.cnblogs.com/blog/1460995/201812/1460995-20181218212547911-1667391952.gif)
# 组件代码
完整代码请戳☞[Vue-Components-Library/ExportExcel](https://github.com/wangjiachen199366/Vue-Components-Library/tree/master/ExportExcel)
(完)
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
嵌入式优质项目,资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松copy复刻,拿到资料包后可轻松复现出一样的项目。 本人单片机开发经验充足,深耕嵌入式领域,有任何使用问题欢迎随时与我联系,我会及时为你解惑,提供帮助。 【资源内容】:包含完整源码+工程文件+说明,项目具体内容可查看下方的资源详情。 【附带帮助】: 若还需要嵌入式物联网单片机相关领域开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步。 【本人专注嵌入式领域】: 有任何使用问题欢迎随时与我联系,我会及时解答,第一时间为你提供帮助,CSDN博客端可私信,为你解惑,欢迎交流。 【建议小白】: 在所有嵌入式开发中硬件部分若不会画PCB/电路,可选择根据引脚定义将其代替为面包板+杜邦线+外设模块的方式,只需轻松简单连线,下载源码烧录进去便可轻松复刻出一样的项目 【适合场景】: 相关项目设计中,皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻,也可以基于此项目进行扩展来开发出更多功能
资源推荐
资源详情
资源评论
收起资源包目录
物联网监控农业项目,前端使用vue开发.zip (44个子文件)
Archieabc
babel.config.js 73B
src
App.vue 1KB
plugins
vant.js 89B
element.js 119B
assets
logo.png 7KB
main.js 539B
ExportExcel
ExportExcel.js 5KB
index.vue 1KB
README.md 3KB
components
Setyuzhi.vue 18KB
Setting.vue 14KB
HelloWorld.vue 8KB
Operation.vue 10KB
Analysis.vue 3KB
History.vue 47KB
Usermanage.vue 23KB
Setphone.vue 18KB
Login.vue 4KB
Home.vue 17KB
Main.vue 23KB
Any.vue 3KB
BackToTop
index.vue 3KB
README.md 2KB
router
index.js 3KB
views
Home.vue 418B
About.vue 89B
dist
js
app.6ffa9483.js.map 377KB
chunk-8d70f6bc.319cb751.js 949KB
chunk-vendors.e3090332.js.map 8.48MB
chunk-vendors.e3090332.js 1.88MB
app.6ffa9483.js 93KB
chunk-8d70f6bc.319cb751.js.map 2.47MB
css
app.ac176645.css 3KB
chunk-vendors.e1cef474.css 310KB
favicon.ico 4KB
index.html 784B
fonts
element-icons.535877f5.woff 28KB
element-icons.732389de.ttf 55KB
package.json 1KB
public
favicon.ico 4KB
index.html 425B
package-lock.json 439KB
.gitignore 207B
README.md 336B
共 44 条
- 1
资源评论
阿齐Archie
- 粉丝: 3w+
- 资源: 2463
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功