excel表格上传

一、员工页面跳转

导入

二、excel导入功能需要使用npm包xlsx，所以需要安装xlsx插件

$ npm i xlsx

三、组件封装

src/components/UploadExcel/index.vue

四、注册全局的导入excel组件

components/index.js

import UploadExcel from './UploadExcel'
const components = {
  UploadExcel,
}
export default {
  install(Vue) {
    Object.keys(components).forEach(key => {
      // 注册组件
      Vue.component(key, components[key])
    })
  }
}

main.js

import components from '@/components'
Vue.use(components)

五、建立公共导入的页面路由

src/router/index.js
{
    path: '/import',
    component: Layout,
    hidden: true, // 隐藏在左侧菜单中
    children: [{
      path: '', // 二级路由path什么都不写 表示二级默认路由
      component: () => import('@/views/import')
    }]
  },

六、创建import路由组件 src/views/import/index.vue

七、封装导入员工的api接口 employee.js

import request from '@/utils/request'
export function importEmployee(data) {
  return request({
    url: '/sys/user/batch',
    method: 'post',
    data
  })
}

八、获取导入的excel数据, 导入excel接口

src/views/import/index.vue