<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格导出demo</title>
<link rel="stylesheet" href="css/element.css">
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/element.js"></script>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.table2excel.js"></script>
</head>
<body>
<div id="app">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>简单表头</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="dowloadDemo1('demo1')">导出</el-button>
</div>
<div id="demo1">
<el-table
:data="tableData1"
style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>复杂表头</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="dowloadDemo2('demo2')">导出</el-button>
</div>
<div id="demo2">
<el-table
:data="tableData2"
style="width: 100%">
<el-table-column prop="date" label="日期" width="150">
</el-table-column>
<el-table-column label="配送信息">
<el-table-column prop="name" label="姓名" ></el-table-column>
<el-table-column label="地址">
<el-table-column prop="province" label="省份" ></el-table-column>
<el-table-column prop="city" label="市区" ></el-table-column>
<el-table-column prop="address" label="地址" ></el-table-column>
<el-table-column prop="zip" label="邮编" ></el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</el-card>
</div>
</body>
<script>
var index = new Vue({
el: '#app',
data: {
tableData1: [{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableData2: [{
date: '2016-05-03',
name: '王小虎1',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎2',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎3',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
},],
},
created() {
},
methods: {
dowloadDemo1(name) {
onImport('demo1', name);
},
dowloadDemo2(name) {
onImport('demo2', name);
}
}
});
function onImport(tableId, excelName,) {
$("#" + tableId).table2excel({
exclude: ".noExl",
filename: excelName + ".xls",
name: "Excel Document Name.xlsx",
exclude_img: true,
exclude_links: true,
exclude_inputs: true,
});
}
</script>
</html>
demo.zip （14个子文件） 
demo css 
commonStyle.css 1KB fonts element-icons.ttf 55KB element-icons.woff 28KB element.css 284KB
index.html 4KB js vue.js 129KB jquery-1.11.0.js 276KB element.js 843KB jquery.table2excel.js 9KB .idea misc.xml 179B modules.xml 267B demo.iml 469B workspace.xml 3KB .gitignore 103B资源评论
itfound_01
- 粉丝: 46
- 资源: 5
最新资源
- ssm+vue的台球厅管理系统(有报告)。Javaee项目，ssm vue前后端分离项目。
- Comsol电磁波模型下的金属超表面光栅：基于TE与TM偏振斜入射时的多级衍射与反射光谱计算研究 ,Comsol电磁波模型下的金属超表面光栅：探究TE TM偏振斜入射时不同衍射级反射光谱的精细计算
- 插头式网站Javascript防护脚本
- ssm+vue的企业员工管理系统（有报告）。Javaee项目，ssm vue前后端分离项目。
- 光伏储能虚拟同步发电机J与D参数协同自适应控制：VSG功能实现与仿真分析,光伏储能虚拟同步发电机参数协同自适应控制及高效能量管理仿真模型研究,光伏储能同步发电机J和D参数协同自适应控制仿真模型 ①自适
- 冷链物流政策发展演变及趋势研判-2024.pdf
- 金融业数据库创新发展报告（2024）.pdf
- 从中国企业视角看元宇宙发展研究报告 2024-52页.pdf
- 数据治理体系总体方案与实施路线图(27页).pptx
- PLC状态机大解析：西门子进阶实战教程SICAR4.0、OMAC与CPG源码集萃,PLC标准状态机实战资料集合：迈向行业高手的西门子1500 PLC与TP1200触摸屏HMI进阶教程,标准PLC状态机
- JESD209-5C LPDDR5/5X
- PMSM永磁同步电机参数高精度辨识仿真：定子电阻、DQ电感与转子磁链辨识，适用于表贴与内嵌式电机，算法简洁，支持多种芯片，Matlab2018版,PMSM永磁同步电机参数高精度辨识仿真：定子电阻、DQ
- 基于COMSOL的岩石损伤与热水力损伤耦合模型研究,COMSOL下的岩石损伤与热水力损伤耦合模型研究,comsol 岩石损伤 热水力损伤耦合模型 ,comsol; 岩石损伤; 热水力损伤; 耦合模型
- 模拟IC设计专题：基于Gpdk工艺与Cadence电路工具的以太网PHY项目学习资料集,模拟IC设计技术解析：以太网络系统级电路设计与版图实战教程（含Gpdk工艺）,模拟ic设计，一个完整的以太网项目
- JESD209-4-1A LPDDR4X
- 利用元胞自动机模拟晶粒生长与熔池微观组织演变：从枝晶到合金凝固的动态观察,基于元胞自动机的晶粒生长与熔池微观组织演变模拟研究,元胞自动机模拟晶粒生长 熔池微观组织演变，模拟枝晶，晶粒生长，合金凝固，熔
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
