vue導(dǎo)出excel表格的新手詳細(xì)教程
更新時間：2022年05月23日 12:22:17 作者：前端小腦虎
相信大家做項目的時候,功能中都有導(dǎo)出模塊,下面這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel表格的詳細(xì)教程,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
前言
在開發(fā)的時候，會經(jīng)常用的導(dǎo)出excel表格功能,剛好自己開發(fā)有遇到，就記錄一下
一、安裝vue-json-excel
npm install vue-json-excel -S
二、main.js中引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)三、在代碼中使用
<template>
<download-excel
class="export-excel-wrapper"
:data="DetailsForm"
:fields="json_fields"
:header="title"
name="需要導(dǎo)出的表格名字.xls"
>
<!-- 上面可以自定義自己的樣式，還可以引用其他組件button -->
<el-button type="success">導(dǎo)出</el-button>
</download-excel>
</template>四、數(shù)據(jù)
DetailsForm：需要導(dǎo)出的數(shù)據(jù)
title：表格標(biāo)題
json_fields：里面的屬性是excel表每一列的title,用多個詞組組成的屬性名(中間有空格的)要加雙引號; 指定接口的json內(nèi)某些數(shù)據(jù)下載,若不指定，默認(rèn)導(dǎo)出全部數(shù)據(jù)中心全部字段
<script>
title: "xx公司表格",
json_fields: {
"排查日期":'date',
"整改隱患內(nèi)容":'details',
"整改措施":'measure',
"整改時限":'timeLimit',
"應(yīng)急措施和預(yù)案":'plan',
"整改責(zé)任人":'personInCharge',
"填表人":'preparer',
"整改資金":'fund',
"整改完成情況":'complete',
"備注":'remark',
},
DetailsForm: [
{
date: "2022-3-10",
details: "卸油區(qū)過路燈損壞",
measure: "更換燈泡",
timeLimit: "2022-3-21",
plan: "先使用充電燈代替,貼好安全提醒告示",
personInCharge: "王xx",
preparer: "王xx",
fund: "20元",
complete: "已完成整改",
remark: "重新更換了燈泡",
},
],
</script>五、效果
六、一些常用參數(shù)
總結(jié)
到此這篇關(guān)于vue導(dǎo)出excel表格的文章就介紹到這了,更多相關(guān)vue導(dǎo)出excel表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vite(vue3)配置內(nèi)網(wǎng)ip訪問的方法步驟
Vite是一個快速的構(gòu)建工具,Vue3是一個流行的JavaScript框架,下面這篇文章主要給大家介紹了關(guān)于vite(vue3)配置內(nèi)網(wǎng)ip訪問的方法步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
在Vite項目中配置路由時,可能會遇到文件路徑錯誤導(dǎo)致的加載失敗問題,常見的解決辦法包括安裝路徑處理插件、正確設(shè)置vite.config.js中的路徑別名以及重啟項目,通過正確配置,可以確保路由正確加載對應(yīng)的界面文件,避免路徑錯誤導(dǎo)致的問題2024-10-10
這篇文章主要介紹了Vue2和Vue3的10種組件通信方式梳理，本文將通過選項式API?組合式API以及setup三種不同實現(xiàn)方式全面介紹Vue2和Vue3的組件通信方式，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了Vue3在css中使用js變量及其原理解讀,結(jié)合實例代碼介紹了vue3中css使用script中定義的變量的方法，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue下history模式刷新后404錯誤解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
解決vue動態(tài)路由異步加載import組件,加載不到module的問題
這篇文章主要介紹了解決vue動態(tài)路由異步加載import組件,加載不到module的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue?Baidu?Map之自定義點圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點的優(yōu)先級問題，結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中使用swiper 插件出錯問題及解決辦法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了vue-better-scroll 的使用實例代碼詳解，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
vue3中emit('update:modelValue')使用簡單示例
這篇文章主要給大家介紹了關(guān)于vue3中emit('update:modelValue')使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-09-09