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