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 ar

本文介绍了如何在Vue项目中,基于vue-admin-template封装一个导入Excel数据的组件。首先安装xlsx库,然后引入并使用预设的文件上传组件,进行样式调整。接着理解uploadexcel组件的工作原理,并将默认导出改为按需导出。最后,对导入数据的类型进行处理,确保数据转换正确。
最低0.47元/天 解锁文章
568

被折叠的 条评论
为什么被折叠?



