Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼
更新時(shí)間：2022年08月17日 10:09:24 作者：ITERCHARLIE
這篇文章主要介紹了Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼,代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
導(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: '終端編號(hào)', attr: 'terminalId', type: 'input', disable: true },
{ label: '接入時(shí)間', 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è)備型號(hào)', attr: 'terminalModuleId', type: 'input', disable: true },
{ label: '運(yùn)行類型', attr: 'runtype', type: 'select', disable: true }
]
},
{
title: '布點(diǎn)屬性',
propsData: [
{ label: '五級(jí)行政區(qū)劃地址', attr: 'areaName', type: 'select', disable: false, style: 'width:400px' },
{ label: '五級(jí)行政區(qū)劃代碼', attr: 'areaCode', type: 'input', disable: false },
{ label: '其他標(biāo)識(shí)', 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: '是否接入省平臺(tái)', attr: 'ifProvincial', type: 'select', disable: false },
{ label: '省統(tǒng)一設(shè)備編號(hào)', attr: 'provincialCode', type: 'input', disable: false }
]
}
],
defaultFields: [
'terminalId',
'crtTime',
'groupName',
'channel',
'enabled',
'runtype',
'areaName',
'otherType',
'position',
'ifProvincial',
'provincialCode'
],
exportFields: [
{ label: '編號(hào)', value: 'terminalId' },
{ label: '時(shí)間, value: 'crtTime' },
{ label: '機(jī)構(gòu)', value: 'groupName' },
{ label: '來源', value: 'channel' },
{ label: '啟停狀態(tài)', value: 'enabled' },
{ label: '類型', value: 'runtype' },
{ label: '型號(hào)', value: 'terminalModuleId' },
{ label: '行政區(qū)劃地址', value: 'areaName' },
{ label: '行政區(qū)劃代碼', value: 'areaCode' },
{ label: '標(biāo)識(shí)', 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è)備編號(hào)', value: 'provincialCode' }
]
}選擇列
<el-table
:data="tableData"
border
style="flex: 1; width: 100%"
@selection-change="handleSelectionChange"
>
按鈕點(diǎn)擊事件
showDialog() {
this.exportExcel = true //用于彈出框的 :visible.sync 屬性,為true時(shí)顯示
this.checkedFields = [...options.defaultFields] //從js配置文件中獲取默認(rèn)選擇項(xiàng)的value
this.isIndeterminate = true //用于多選框的全選按鈕 indeterminate 屬性用以表示 checkbox 的不確定狀態(tài)，一般用于實(shí)現(xiàn)全選的效果
}彈出框
<el-dialog
title="請(qǐng)勾選需要導(dǎo)出的字段"
:visible.sync="exportExcel" //為true則彈出，為false則隱藏
custom-class="dialog-class"
>
//checkAll為全選按鈕的綁定對(duì)象
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全選</el-checkbox>
<el-divider />
//checkedFields為多選框的綁定對(duì)象，當(dāng)選中后會(huì)調(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) {
//選擇項(xiàng)大于0，表示有字段被選中
const header = [] //列頭
const fields = [] //值
const title = 'XXX標(biāo)題'
this.exportFields.filter(r => {
if (this.checkedFields.includes(r.value)) {
//將選擇項(xiàng)跟staticData.js中的配置項(xiàng)比較，相同則表示該字段需要導(dǎo)出
header.push(r.label)
fields.push(r.value)
}
})
//此處為列選擇項(xiàng)，比如只需要導(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: '請(qǐng)勾選需要導(dǎo)出的字段',
type: 'warning'
})
}
},
//該方法是為了將對(duì)象中一些用數(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個(gè)再保存
if (item.areaCode && fields.includes('areaName')) {
//得出areaName（xxxx省XXX市xxx區(qū)XXXX鎮(zhèn)街XXX村居）一個(gè)標(biāo)題拆分成'省', '市', '區(qū)', '鎮(zhèn)街', '村居'五個(gè)標(biāo)題再插入回?cái)?shù)組
const index = fields.indexOf('areaName')
const label = ['省', '市', '區(qū)', '鎮(zhèn)街', '村居']
//將areaName的value值也拆分成5個(gè)
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實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼的文章就介紹到這了,更多相關(guān)vue自定義字段導(dǎo)出excel內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3使用hooks函數(shù)實(shí)現(xiàn)代碼復(fù)用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實(shí)現(xiàn)代碼復(fù)用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復(fù)用性,?讓我們能在不同的組件中都利用hooks函數(shù)2022-06-06
Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解
這篇文章主要介紹了Vue + Element-ui的下拉框el-select獲取額外參數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在開發(fā)中經(jīng)常有從列表跳到詳情頁，然后返回詳情頁的時(shí)候需要緩存列表頁的狀態(tài)（比如滾動(dòng)位置信息），這個(gè)時(shí)候就需要保存狀態(tài)，要緩存狀態(tài)2021-10-10
解決vue-cli項(xiàng)目打包出現(xiàn)空白頁和路徑錯(cuò)誤的問題
今天小編就為大家分享一篇解決vue-cli項(xiàng)目打包出現(xiàn)空白頁和路徑錯(cuò)誤的問題。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
文章介紹了如何在Vue中通過Click方法獲取原事件的參數(shù),包括默認(rèn)參數(shù)、自定義參數(shù)以及如何同時(shí)獲取原生事件和自定義參數(shù)的方法2024-12-12
vue框架提供了前端開發(fā)組件的思想，可以通過組件來組合成一個(gè)完整的頁面，都是隨著組件數(shù)量原來越多，組件之間難免需要相互通信。本文將為大家介紹四種組件間的通信方式，需要的可以參考一下2022-01-01
渲染器用于完成渲染操作,比如在瀏覽器平臺(tái)上渲染器可以將虛擬DOM轉(zhuǎn)換為真實(shí)DOM,本文將通過一個(gè)簡單例子來帶大家理解Vue中渲染器的工作過程,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了vue3中的非父子組件傳值，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
flutter使用tauri實(shí)現(xiàn)一個(gè)一鍵視頻轉(zhuǎn)4K軟件
這篇文章主要為大家介紹了flutter使用tauri實(shí)現(xiàn)一個(gè)一鍵視頻轉(zhuǎn)4K軟件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09