1、封装导入excel数据文件组件
npm i xlsx
2、vue-admin-template封装的传入文件组件,地址:
https://github.com/PanJiaChen/vue-element-admin
/blob/master/src/components/UploadExcel/index.vue
3、全局导入组件component/index.js
import PageTools from './PageTools'
import UploadExcel from './UploadExcel'+++
export default {
install(Vue) {
Vue.component('PageTools', PageTools) // 注册工具栏组件
Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件+++
}
}
4、修改uploadexcel样式(最下面)
5、uploadexcel的理解
methods: {
//header表头
//results表格数据
generateData({ header, results }) {
this.excelData.header = header
this.excelData.results = results
this.onSuccess && this.onSuccess(this.excelData)
},
6、修改uploadexcel
把默认导出修改为按需导出
import { read, utils } from 'xlsx'
删除XLSX.
7、修改导入时的数据类型
// 方法一、数据转换
const arr = []
results.forEach((item) => {
const userInfo = {}
Object.keys(item).forEach((key) => {
if (
userRelations[key] === 'timeOfEntry' ||
userRelations[key] === 'correctionTime'
) {
return (userInfo[userRelations[key]]