1.将vue-element-admin提供的组件复制到我们自己的项目 src/components/UploadExcel
下
2.新建一个公共的导入页面,即import路由组件 src/views/import/index.vue
在页面中使用前面封装的excel上传组件,并补充导入成功后的回调函数
<template>
<upload-excel :on-success="handleSuccess" />
</template>
<script>
import UploadExcel from '@/src/components/UploadExcel'
export default {
name: 'Import',
methods: {
handleSuccess({ header, results }) {
console.log(header, results)
}
},
component:{
UploadExcel
}
}
</script>
3.配置路由
{
path: '/import',
component: Layout,
hidden: true, // 不显示到左侧菜单
children: [{
path: '',
component: () => import('@/views/import')
}]
}
4.测试结果
浏览器手动输入/impor 点击上传,分析handleSuccess的执行结果