先看效果:
UI界面展示
Excel展示:
代码如下:
这里使用的是vue3组件库 Naive ui
<template>
<div>
<div class="container">
<span style="font-size: 18px"><b>评价关系</b></span>
<span style="font-size: 18px"><b>评估表</b></span>
<n-button @click="handleUploadClick">上传 Excel 文件</n-button>
<input type="file" ref="fileInput" @change="handleFileChange" hidden />
</div>
<n-data-table :columns="columns" :data="tableData" />
</div>
</template>
<script setup lang="ts">
import * as XLSX from 'xlsx'
import { ref, reactive, toRefs, watch, onMounted, getCurrentInstance } from 'vue'
import { NButton, NDataTable, NUpload } from 'naive-ui'
const fileInput = ref(null as HTMLInputElement | null)
const columns = [
// key 是表头的字段名
// title 是表头的文字
{ title: '工号', key: '工号' },
{ title: '被评人', key: '被评人' },
{ title: '上级', key: '上级' },
{ title: '同级', key: '同级' },
{ title: '下级', key: '下级' },
{ title: '客户', key: '客户' },
]
const tableData: any = ref([])
function handleUploadClick() {
if (fileInput.value) {
fileInput.value.click()
}
}
function handleFileChange(event: Event) {
const files = (event.target as HTMLInputElement).files
if (files && files.length > 0) {
const file = files[0]
const reader = new FileReader()
reader.onload = (e) => {
const data = (e.target as any).result // 获取上传数据
const workbook = XLSX.read(data, { type: 'binary' }) // 获取excel
const firstSheetName = workbook.SheetNames[0] // 获取表名
const worksheet = workbook.Sheets[firstSheetName] // 获取表格中的数据
const jsonData = XLSX.utils.sheet_to_json(worksheet) // 将数据转为 json
tableData.value = jsonData
}
reader.readAsBinaryString(file)
}
return {
fileInput,
columns,
tableData,
handleUploadClick,
handleFileChange,
}
}
</script>
<style scoped>
.container {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-around;
}
.upload {
margin-left: 500px;
}
</style>