vue如何將v-for中的表格導(dǎo)出來
更新時間：2018年05月07日 09:39:33 作者：陌紫嫣
這篇文章主要介紹了vue如何將v-for中的表格導(dǎo)出來,需要的朋友可以參考下
一、需要安裝以下依賴
npm install -S file-saver xlsx npm install -D script-loader
二、項(xiàng)目中新建一個文件夾：（vendor---名字任?。?/strong>
里面放置兩個文件Blob.js和 Export2Excel.js。
三、在.vue文件中
寫這兩個方法：其中l(wèi)ist是表格的內(nèi)容
//export2Excel是你點(diǎn)擊導(dǎo)出所綁定的方法名
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');//其中自己的路徑也要注意下
const tHeader = ['序號', 'IMSI', 'MSISDN', '證件號碼', '姓名'];//表格的頭的名稱
const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];//對應(yīng)的內(nèi)容的名字，一定要一 一 對應(yīng)
const list = this.tableData;//tableData是你表單所綁定的數(shù)據(jù)名稱，一定要對應(yīng)
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');//列表excel這個是導(dǎo)出以后表格的名稱，根據(jù)需要自行更改
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
總結(jié)
以上所述是小編給大家介紹的vue如何將v-for中的表格導(dǎo)出來，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- 解決vue組件中使用v-for出現(xiàn)告警問題及v for指令介紹
- vue中for循環(huán)更改數(shù)據(jù)的實(shí)例代碼(數(shù)據(jù)變化但頁面數(shù)據(jù)未變）
- 關(guān)于vue-router的beforeEach無限循環(huán)的問題解決
- Vue ElementUI之Form表單驗(yàn)證遇到的問題
- 淺談vue.js中v-for循環(huán)渲染
- VUE中v-model和v-for指令詳解
- Vue.js中輕松解決v-for執(zhí)行出錯的三個方案
- Vue form 表單提交+ajax異步請求+分頁效果
- vue.js指令v-for使用及索引獲取
- Vuejs第六篇之Vuejs與form元素實(shí)例解析
相關(guān)文章
Vue中搭配Bootstrap實(shí)現(xiàn)Vue的列表增刪功能
日常開發(fā)中，我們可以用?“拿來主義”?借助Bootstarp現(xiàn)成的一些樣式，快速生成我們想要的頁面布局，避免書寫大量的HTML和CSS代碼，省下了許多不必要的時間，可以直接搭配vue使用2022-11-11
Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的解決方法
這篇文章主要介紹了Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的問題分析和解決方法,文中通過代碼示例講解的非常詳細(xì),對大家解決問題有一定的幫助,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了bpmn-js在vue中的基本使用及操作功能,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要為大家介紹了Bpmn.js?自定義描述文件使用說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了Vue+Canvas繪圖的使用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue + element 實(shí)現(xiàn)多選框組并保存已選id集合的示例代碼
這篇文章主要介紹了Vue + element 實(shí)現(xiàn)多選框組并保存已選id集合,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
如果你在 vue3 開發(fā)中使用了語法的話,對于組件的name屬性,需要做一番額外的處理,下面這篇文章主要給大家介紹了關(guān)于Vue3 setup語法糖的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了實(shí)現(xiàn)一個Vue版Upload組件，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案
我自己使用addRoutes動態(tài)添加的路由頁面,使用router-link標(biāo)簽可以跳轉(zhuǎn),但是一刷新就會自動跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧2023-10-10
vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實(shí)現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08