Vue實現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼
更新時間：2022年08月17日 10:09:24 作者：ITERCHARLIE
這篇文章主要介紹了Vue實現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
導(dǎo)入依賴
"element-ui": "2.13.0", "file-saver": "^2.0.5", "xlsx": "^0.18.5", "xlsx-populate": "^1.21.0"
導(dǎo)入EXCEL導(dǎo)出工具類
import { MessageBox } from 'element-ui'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
// 提示框
Msgbox(title, txt) {
MessageBox.confirm(txt, title, {
confirmButtonText: '確定',
cancelButtonText: '取消'
}).then(() => {
console.log('取消回調(diào)')
})
},
// 導(dǎo)出的方法
xlsxDownload(tHeader, filterVal, list, DfileName) {
console.log('tHeader:', tHeader)
console.log('filterVal:', filterVal)
console.log('list:', list)
const excelName = DfileName + '_' + this.formatDate()
require.ensure([], () => {
const { export_json_to_excel } = require('./vendor/Export2Excel')
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, excelName)
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
// 獲取年月日
formatDate() {
const date = new Date()
var myyear = date.getFullYear()
var mymonth = date.getMonth() + 1
var myweekday = date.getDate()
if (mymonth < 10) {
mymonth = '0' + mymonth
}
if (myweekday < 10) {
myweekday = '0' + myweekday
}
return (myyear + mymonth + myweekday)
}
}在main.js中引入
import commonutil from '@common/utils/commonutil/index.js' Vue.prototype.$commonutil = commonutil
按鈕樣式
<el-button size="mini" style="border-color: #07979C; color: #07979C" @click="showDialog" >導(dǎo)出</el-button>
Data
data() {
return {
exportExcel: false,
checkAll: false,
checkedFields: [],
isIndeterminate: true,
multipleSelection: [],
tableDataAll: [],
exportFields: options.exportFields
}
}staticData.js
export const options = {
channelOptions: [
{
label: 'XXXXXX',
value: '0'
},
{
label: 'XXXXX',
value: '1'
},
{
label: 'XXXXX',
value: '2'
},
{
label: 'XXXXX',
value: '3'
},
{
label: 'XXXXX',
value: '4'
}
],
runTypeOptions: [
{
label: 'XXXX',
value: '0'
},
{
label: 'XXXXX',
value: '1'
}
],
otherTypeOptions: [
{
label: 'XXXXX',
value: '0'
},
{
label: 'XXXX',
value: '1'
}
],
openTypeOptions: [
{
label: 'XXXX',
value: '0'
},
{
label: 'XXXX',
value: '1'
}
],
provincialOptions: [
{
label: '是',
value: '0'
},
{
label: '否',
value: '1'
}
],
networdTypeOptions: [
{
label: 'XXXX',
value: '0'
},
{
label: 'XXXXX',
value: '1'
},
{
label: 'XXXX',
value: '2'
},
{
label: 'XXXX',
value: '3'
},
{
label: 'XXXX',
value: '4'
},
{
label: 'XXXXX',
value: '5'
}
],
{
title: '基礎(chǔ)信息',
width: 'width:25%',
propsData: [
{ label: '終端編號', attr: 'terminalId', type: 'input', disable: true },
{ label: '接入時間', attr: 'crtTime', type: 'input', disable: true },
{ label: '所屬機(jī)構(gòu)', attr: 'groupName', type: 'select', disable: true },
{ label: '渠道來源', attr: 'channel', type: 'select', disable: false, style: 'width:150px' },
{ label: '啟停狀態(tài)', attr: 'enabled', type: 'select', disable: true },
{ label: '設(shè)備型號', attr: 'terminalModuleId', type: 'input', disable: true },
{ label: '運(yùn)行類型', attr: 'runtype', type: 'select', disable: true }
]
},
{
title: '布點(diǎn)屬性',
propsData: [
{ label: '五級行政區(qū)劃地址', attr: 'areaName', type: 'select', disable: false, style: 'width:400px' },
{ label: '五級行政區(qū)劃代碼', attr: 'areaCode', type: 'input', disable: false },
{ label: '其他標(biāo)識', attr: 'otherType', type: 'select', disable: false, style: 'width:150px' },
{ label: '詳細(xì)布點(diǎn)地址', attr: 'stationingId', type: 'input', disable: true, style: 'width:1000px' },
{ label: '經(jīng)緯度', attr: 'mapX', type: 'input', disable: true, style: 'width:400px' },
{ label: '管理員', attr: 'manager', type: 'input', disable: true, style: 'width:400px' },
{ label: '網(wǎng)絡(luò)類型', attr: 'runtype', type: 'input', disable: true },
{ label: 'IP地址', attr: 'runtype', type: 'input', disable: true },
{ label: 'MAC地址', attr: 'runtype', type: 'input', disable: true }
]
},
{
title: '其他信息',
propsData: [
{ label: '是否接入省平臺', attr: 'ifProvincial', type: 'select', disable: false },
{ label: '省統(tǒng)一設(shè)備編號', attr: 'provincialCode', type: 'input', disable: false }
]
}
],
defaultFields: [
'terminalId',
'crtTime',
'groupName',
'channel',
'enabled',
'runtype',
'areaName',
'otherType',
'position',
'ifProvincial',
'provincialCode'
],
exportFields: [
{ label: '編號', value: 'terminalId' },
{ label: '時間, value: 'crtTime' },
{ label: '機(jī)構(gòu)', value: 'groupName' },
{ label: '來源', value: 'channel' },
{ label: '啟停狀態(tài)', value: 'enabled' },
{ label: '類型', value: 'runtype' },
{ label: '型號', value: 'terminalModuleId' },
{ label: '行政區(qū)劃地址', value: 'areaName' },
{ label: '行政區(qū)劃代碼', value: 'areaCode' },
{ label: '標(biāo)識', value: 'otherType' },
{ label: '地址', value: 'position' },
{ label: '經(jīng)緯度', value: 'mapPoint' },
{ label: '管理員', value: 'manager' },
{ label: '網(wǎng)絡(luò)類型', value: 'netword' },
{ label: 'IP地址', value: 'ipAddr' },
{ label: 'MAC地址', value: 'macAddr' },
{ label: '是否接入', value: 'ifProvincial' },
{ label: '設(shè)備編號', value: 'provincialCode' }
]
}選擇列
<el-table
:data="tableData"
border
style="flex: 1; width: 100%"
@selection-change="handleSelectionChange"
>
按鈕點(diǎn)擊事件
showDialog() {
this.exportExcel = true //用于彈出框的 :visible.sync 屬性,為true時顯示
this.checkedFields = [...options.defaultFields] //從js配置文件中獲取默認(rèn)選擇項的value
this.isIndeterminate = true //用于多選框的全選按鈕 indeterminate 屬性用以表示 checkbox 的不確定狀態(tài)，一般用于實現(xiàn)全選的效果
}彈出框
<el-dialog
title="請勾選需要導(dǎo)出的字段"
:visible.sync="exportExcel" //為true則彈出，為false則隱藏
custom-class="dialog-class"
>
//checkAll為全選按鈕的綁定對象
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全選</el-checkbox>
<el-divider />
//checkedFields為多選框的綁定對象，當(dāng)選中后會調(diào)用handleCheckedFields方法將value傳入
//checkedFields中
//exportFields為默認(rèn)選中的label跟value
<el-checkbox-group v-model="checkedFields" @change="handleCheckedFields">
<el-checkbox v-for="(item,index) in exportFields" :key="index" :label="item.value" style="margin-bottom: 30px;">{{ item.label }}</el-checkbox>
</el-checkbox-group>
<div style="display: flex;justify-content: center;padding-top: 100px;">
<el-button
style="background-color: #1296DB; color: white"
@click="downExcel"
>導(dǎo)出</el-button>
</div>
</el-dialog>
方法
//列選擇事件
handleSelectionChange(val) {
this.multipleSelection = val
},
//全選按鈕點(diǎn)擊事件
handleCheckAllChange(val) {
if (val) {
//如果true，則將所有的字段跟value傳入checkBox多選框的v-model(checkedFields)中
this.exportFields.forEach(item => {
this.checkedFields.push(item.value)
})
} else {
//false則全不選，清空checkedFields
this.checkedFields = []
}
//isIndeterminate為false則全選按鈕變白
this.isIndeterminate = false
}
//多選框選中事件
handleCheckedFields(value) {
//value為checkedFields集合
const checkedCount = value.length
console.log(value)
//如果checkedCount 選中的數(shù)量等于exportFields的長度，表示全選，所以checkAll為true全選按鈕需要選中
this.checkAll = checkedCount === this.exportFields.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.exportFields.length
}
//導(dǎo)出
downExcel() {
if (this.checkedFields.length > 0) {
//選擇項大于0，表示有字段被選中
const header = [] //列頭
const fields = [] //值
const title = 'XXX標(biāo)題'
this.exportFields.filter(r => {
if (this.checkedFields.includes(r.value)) {
//將選擇項跟staticData.js中的配置項比較，相同則表示該字段需要導(dǎo)出
header.push(r.label)
fields.push(r.value)
}
})
//此處為列選擇項，比如只需要導(dǎo)出10列，那么可以在列中只選擇10條
if (this.multipleSelection.length > 0) {
const list = this.changeData(this.multipleSelection, header, fields)
this.$commonutil.xlsxDownload(header, fields, list, title)
} else {
//為0則表示全部都需要導(dǎo)出
const list = this.changeData(this.tableDataAll, header, fields)
this.$commonutil.xlsxDownload(header, fields, list, title)
}
} else {
this.$message({
message: '請勾選需要導(dǎo)出的字段',
type: 'warning'
})
}
},
//該方法是為了將對象中一些用數(shù)字來表示狀態(tài)的字段值轉(zhuǎn)換為中文
changeData(list, header, fields) {
const source = JSON.stringify(list)
const data = JSON.parse(source)
data.forEach(item => {
if (item.channel) {
item.channel = this.channelOptions.filter(r => r.id === item.channel).length > 0 ?
this.channelOptions.filter(r => r.id === item.channel)[0].channelName :
''
// item.channel = this.channelOptions[item.channel].channelName
}
//遍歷所有導(dǎo)出的數(shù)據(jù)，比如enabled 0 表示不可用，1表示可用，那么就要在這里將0轉(zhuǎn)換成為不可用。。。。。
if (item.enabled) {
item.enabled = this.openTypeOptions[item.enabled].label
}
if (item.runtype) {
item.runtype = this.runTypeOptions[item.runtype].label
}
if (item.otherType) {
item.otherType = this.otherTypeOptions[item.otherType].label
}
if (item.ifProvincial) {
item.ifProvincial = options.provincialOptions[item.ifProvincial].label
}
if (item.netword) {
const temp = item.netword.split(',')
temp.forEach((e, i) => {
if (i === 0) {
item.netword = options.networdTypeOptions[e].label
} else {
item.netword = item.netword.concat(',', options.networdTypeOptions[e].label)
}
})
}
//這里將一串地址拆分成5個再保存
if (item.areaCode && fields.includes('areaName')) {
//得出areaName（xxxx省XXX市xxx區(qū)XXXX鎮(zhèn)街XXX村居）一個標(biāo)題拆分成'省', '市', '區(qū)', '鎮(zhèn)街', '村居'五個標(biāo)題再插入回數(shù)組
const index = fields.indexOf('areaName')
const label = ['省', '市', '區(qū)', '鎮(zhèn)街', '村居']
//將areaName的value值也拆分成5個
const field = ['p', 'c', 'a', 'd', 'v']
header.splice(index, 1)
fields.splice(index, 1)
header.splice.apply(header, [index, 0].concat(label))
fields.splice.apply(fields, [index, 0].concat(field))
const arr = this.getTreeNode(this.areaOptions, data => data.value === item.areaCode, 'label')
if (arr.length > 0) {
arr.forEach((a, i) => {
item[field[i]] = a
})
}
}
})
return data
},
//獲取樹形
getTreeNode(tree, func, field = '', nodes = []) {
if (!tree) return []
for (const data of tree) {
field === '' ? nodes.push(tree) : nodes.push(data[field])
if (func(data)) return nodes
if (data.children) {
const childs = this.getTreeNode(data.children, func, field, nodes)
if (childs.length) return childs
}
nodes.pop()
}
return []
}到此這篇關(guān)于Vue實現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼的文章就介紹到這了,更多相關(guān)vue自定義字段導(dǎo)出excel內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)
這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
這篇文章主要介紹了vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章給大家介紹了vue組件創(chuàng)建和傳值的方法，創(chuàng)建組件有三種方法，文中給大家介紹的非常詳細(xì)，父組件傳值給子組件的方法，給大家介紹的也非常詳細(xì)，需要的朋友參考下吧2018-08-08
詳解Vue路由開啟keep-alive時的注意點(diǎn)
這篇文章主要介紹了詳解Vue路由開啟keep-alive時的注意點(diǎn)，非常具有實用價值，有興趣的朋友可以了解一下2017-06-06
Vue2.0實現(xiàn)組件數(shù)據(jù)的雙向綁定問題
這篇文章主要介紹了Vue2.0實現(xiàn)組件數(shù)據(jù)的雙向綁定問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
簡單實現(xiàn)vue中的依賴收集與響應(yīng)的方法
這篇文章主要介紹了簡單實現(xiàn)vue中的依賴收集與響應(yīng)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue項目中components組件(模板)的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了淺析VUE防抖與節(jié)流的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
uni-app中使用ECharts配置四種不同的圖表(示例詳解)
在uni-app中集成ECharts可以為我們的應(yīng)用提供強(qiáng)大的圖表功能,我們詳細(xì)說一下如何在uni-app中使用ECharts,并配置四種不同的圖表,感興趣的朋友跟隨小編一起看看吧2024-01-01
使用vue和datatables進(jìn)行表格的服務(wù)器端分頁實例代碼
本篇文章主要介紹了使用vue和datatables進(jìn)行表格的服務(wù)器端分頁實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06