vue根据vue-admin-template封装导入excel数据文件组件

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

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-element-adminVue-admin-template 的对比 #### 功能差异 Vue-element-admin 是一个基于 Vue.js 和 Element UI 构建的后台前端解决方案,它提供了丰富的功能模块和组件支持。其主要特点在于高度集成化的设计模式以及完善的权限管理机制[^1]。相比之下,vue-admin-template 则是一个更为轻量级的基础模板项目,适合初学者快速搭建简单的管理系统框架。该模板专注于提供基础结构而不包含过多预设的功能模块[^2]。 #### 使用场景分析 对于复杂的企业应用开发需求来说,选择 **vue-element-admin** 更加合适因为它已经内置了许多实用特性如国际化、多环境配置和支持动态路由加载等功能[^3]。而如果开发者只是希望获得一个简洁明了且易于扩展的基础架构,则可以考虑采用 **vue-admin-template**, 它允许用户根据实际需要自行定制所需部分从而减少不必要的依赖引入[^4]。 #### 技术实现上的不同之处 在技术层面, vue-element-admin 运用了 Vuex 来处理全局状态管理和 Axios 实现 HTTP 请求拦截器/响应处理器; 同时还通过 Sass 变量覆盖来调整主题样式配色方案以便于满足个性化设计要求[^5].vue-admin-template 主要关注点放在如何构建最小化的可行产品(MVP),因此它的代码逻辑相对简单直接,并未涉及复杂的业务流程控制或者高级特性的封装[^6]. ```javascript // Example of Vuex store setup in vue-element-admin import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { count: 0, }, mutations: { increment(state) { state.count++ } } }) ``` ```html <!-- A simple layout example within vue-admin-template --> <template> <div id="app"> <router-view/> </div> </template> <script> export default {} </script> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值