快捷導(dǎo)航

vue導(dǎo)出excel表格的新手詳細(xì)教程

更新時(shí)間：2022年05月23日 12:22:17 作者：前端小腦虎

相信大家做項(xiàng)目的時(shí)候,功能中都有導(dǎo)出模塊,下面這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel表格的詳細(xì)教程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在開發(fā)的時(shí)候，會(huì)經(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,用多個(gè)詞組組成的屬性名(中間有空格的)要加雙引號(hào); 指定接口的json內(nèi)某些數(shù)據(jù)下載,若不指定，默認(rèn)導(dǎo)出全部數(shù)據(jù)中心全部字段

<script>
title: "xx公司表格",
 json_fields: {
        "排查日期":'date',
        "整改隱患內(nèi)容":'details',
        "整改措施":'measure',
        "整改時(shí)限":'timeLimit',
        "應(yīng)急措施和預(yù)案":'plan',
        "整改責(zé)任人":'personInCharge',
        "填表人":'preparer',
        "整改資金":'fund',
        "整改完成情況":'complete',
        "備注":'remark',
      },
    DetailsForm: [
        {
          date: "2022-3-10",
          details: "卸油區(qū)過(guò)路燈損壞",
          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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vite(vue3)配置內(nèi)網(wǎng)ip訪問(wèn)的方法步驟
Vite是一個(gè)快速的構(gòu)建工具,Vue3是一個(gè)流行的JavaScript框架,下面這篇文章主要給大家介紹了關(guān)于vite(vue3)配置內(nèi)網(wǎng)ip訪問(wèn)的方法步驟,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
vite vue3 路由配置@找不到文件的問(wèn)題及解決
在Vite項(xiàng)目中配置路由時(shí),可能會(huì)遇到文件路徑錯(cuò)誤導(dǎo)致的加載失敗問(wèn)題,常見的解決辦法包括安裝路徑處理插件、正確設(shè)置vite.config.js中的路徑別名以及重啟項(xiàng)目,通過(guò)正確配置,可以確保路由正確加載對(duì)應(yīng)的界面文件,避免路徑錯(cuò)誤導(dǎo)致的問(wèn)題
2024-10-10
Vue2和Vue3的10種組件通信方式梳理
這篇文章主要介紹了Vue2和Vue3的10種組件通信方式梳理，本文將通過(guò)選項(xiàng)式API?組合式API以及setup三種不同實(shí)現(xiàn)方式全面介紹Vue2和Vue3的組件通信方式，需要的朋友可以參考一下
2022-08-08
Vue3在css中使用js變量及其原理解讀
這篇文章主要介紹了Vue3在css中使用js變量及其原理解讀,結(jié)合實(shí)例代碼介紹了vue3中css使用script中定義的變量的方法，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-09-09
vue下history模式刷新后404錯(cuò)誤解決方法
這篇文章主要介紹了vue下history模式刷新后404錯(cuò)誤解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問(wèn)題
這篇文章主要介紹了解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker的示例
這篇文章主要介紹了Vue?Baidu?Map之自定義點(diǎn)圖標(biāo)bm-marker,文中給大家介紹了vue-baidu-api地圖標(biāo)記點(diǎn)（自定義標(biāo)記圖標(biāo)），設(shè)置標(biāo)記點(diǎn)的優(yōu)先級(jí)問(wèn)題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-08-08
解決vue中使用swiper 插件出錯(cuò)的問(wèn)題
這篇文章主要介紹了vue中使用swiper 插件出錯(cuò)問(wèn)題及解決辦法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2021-08-08
vue-better-scroll 的使用實(shí)例代碼詳解
這篇文章主要介紹了vue-better-scroll 的使用實(shí)例代碼詳解，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-12-12
vue3中emit('update:modelValue')使用簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于vue3中emit('update:modelValue')使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-09-09