网站布局方法分类,北京海淀房管局网站,织梦dede模板自带的网站地图优化指南,wordpress电视主题想要实现前端对表格中的数据进行导出#xff0c;这里推荐使用xlsx这个依赖库实现。
1、安装
pnpm install xlsx
2、使用
import * as XLSX from xlsx;
直接在组件里导入XLSX库#xff0c;然后给表格table通过ref创建响应式数据拿到table实例#xff0c;将实…想要实现前端对表格中的数据进行导出这里推荐使用xlsx这个依赖库实现。
1、安装
pnpm install xlsx
2、使用
import * as XLSX from xlsx;
直接在组件里导入XLSX库然后给表格table通过ref创建响应式数据拿到table实例将实例传给XLSX.utils.table_to_book()方法再使用XLSX.writeFile()就可以下载excel文件了。具体方法请看demo源代码。
3、demo源代码
templatediv classpage6div styledisplay:flex;justify-content: flex-endel-button typeprimary clickexportExcel导出/el-button/divel-table reftableRef :datatableData stripe stylewidth: 100%el-table-column propdate labelDate width180 /el-table-column propname labelName width180 /el-table-column propaddress labelAddress //el-table/div
/templatescript setup
import * as XLSX from xlsx
const tableRef ref(null)
const exportExcel () {const tableDom tableRef.value?.$el;if (tableDom) {const wb XLSX.utils.table_to_book(tableDom);XLSX.writeFile(wb, 表格数据.xlsx);}}
const tableData [{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-04,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-01,name: Tom,address: No. 189, Grove St, Los Angeles,},
]
/scriptstyle langless scoped
.page6{width: 100%;height: 100%;padding: 20px;
}/style
4、效果 下载的excel文件
