在Vue中，table數(shù)據(jù)的導(dǎo)入導(dǎo)出是一個(gè)非常常見的需求。為了實(shí)現(xiàn)這個(gè)功能，我們需要使用一些工具和庫，比如element-ui和xlsx。

首先，我們需要定義一個(gè)table，這個(gè)table要設(shè)置好表頭和表體的數(shù)據(jù)格式。使用element-ui的table組件可以極大地簡(jiǎn)化這個(gè)過程。以下是一個(gè)基本的table結(jié)構(gòu)示例：

// 模板
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
// 數(shù)據(jù)
<script>
export default {
data() {
return {
tableData: [{
date: '2022-02-01',
name: '張三',
address: '杭州市西湖區(qū)'
}, {
date: '2022-02-02',
name: '李四',
address: '上海市浦東新區(qū)'
}, {
date: '2022-02-03',
name: '王五',
address: '深圳市南山區(qū)'
}]
}
}
}
</script>

接下來，我們需要實(shí)現(xiàn)數(shù)據(jù)的導(dǎo)出和導(dǎo)入。使用element-ui的el-button組件可以讓按鈕的樣式更加美觀和易用。以下是一個(gè)基本的導(dǎo)出和導(dǎo)入示例：

<template>
<div>
<el-button type="primary" icon="el-icon-download" @click="handleExport">導(dǎo)出</el-button>
<el-button type="primary" icon="el-icon-upload" @click="handleImport">導(dǎo)入</el-button>
</div>
</template>
<script>
import { exportJsonToExcel } from '@/utils/excel.js'
import { readXlsxFile } from 'xlsx'
export default {
methods: {
handleExport() {
// 導(dǎo)出數(shù)據(jù)
const data = this.tableData.map(item =>{
return {
'日期': item.date,
'姓名': item.name,
'地址': item.address
}
})
exportJsonToExcel(data, 'table_data')
},
async handleImport() {
// 讀取文件并解析
const file = this.$refs.importInput.files[0]
const workbook = await readXlsxFile(file)
const sheetName = workbook.SheetNames[0]
const sheet = workbook.Sheets[sheetName]
const data = XLSX.utils.sheet_to_json(sheet)
// 更新table數(shù)據(jù)
this.tableData = data.map(item =>{
return {
'date': item['日期'],
'name': item['姓名'],
'address': item['地址']
}
})
}
}
}
</script>

在這個(gè)示例中，我們使用了一個(gè)名為excel.js的工具庫，其中exportJsonToExcel函數(shù)可以將JSON數(shù)據(jù)導(dǎo)出為Excel文件。同樣，使用xlsx庫讀取和解析Excel文件也變得十分簡(jiǎn)單和直觀。我們可以在handleExport函數(shù)中調(diào)用exportJsonToExcel函數(shù)來導(dǎo)出我們的table數(shù)據(jù)。在handleImport函數(shù)中，我們首先讀取并解析Excel文件，然后將得到的數(shù)據(jù)遍歷并轉(zhuǎn)換成我們的table數(shù)據(jù)格式，并最終更新table的數(shù)據(jù)。

使用Vue和element-ui，導(dǎo)入導(dǎo)出table數(shù)據(jù)已經(jīng)變得非常簡(jiǎn)單方便！