一?后端

1?創建監聽器

import com.alibaba.excel.context.AnalysisContext; import com.alibaba.excel.event.AnalysisEventListener; import com.baiyee.sdgt.cmn.mapper.DictMapper; import com.baiyee.sdgt.model.cmn.Dict; import com.baiyee.sdgt.vo.cmn.DictEeVo; import org.springframework.beans.BeanUtils;public class DictListener extends AnalysisEventListener<DictEeVo> {private DictMapper dictMapper;public DictListener(DictMapper dictMapper) {this.dictMapper = dictMapper;}// 一行一行讀取@Overridepublic void invoke(DictEeVo dictEeVo, AnalysisContext analysisContext) {// 調用方法添加數據庫Dict dict = new Dict();BeanUtils.copyProperties(dictEeVo, dict);dictMapper.insert(dict);}@Overridepublic void doAfterAllAnalysed(AnalysisContext analysisContext) {} }

2?接口

// 導入數據字典 void importDictData(MultipartFile file);

3?實現

// 導入數據字典 @Override @CacheEvict(value = "dict", allEntries = true) public void importDictData(MultipartFile file) {try {EasyExcel.read(file.getInputStream(), DictEeVo.class, new DictListener(baseMapper)).sheet().doRead();} catch (IOException e) {e.printStackTrace();} }

4?控制器

// 導入數據字典 @PostMapping("importData") public Result importDict(MultipartFile file) {dictService.importDictData(file);return Result.ok(); }

二?前端

1 頁面部分

<template><div class="app-container"><!-- 導出功能 --><div class="el-toolbar"><div class="el-toolbar-body" style="justify-content: flex-start;"><!-- 導出功能 --><el-button type="text" @click="exportData"><i class="fa fa-plus" /> 導出</el-button><!-- 導入功能 --><el-button type="text" @click="importData"><i class="fa fa-plus" /> 導入</el-button></div></div><!-- 列表功能 --><el-table:data="list"style="width: 100%"row-key="id"borderlazy:load="getChildrens":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-column label="名稱" width="230" align="left"><template slot-scope="scope"><span>{{ scope.row.name }}</span></template></el-table-column><el-table-column label="編碼" width="220"><template slot-scope="{row}">{{ row.dictCode }}</template></el-table-column><el-table-column label="值" width="230" align="left"><template slot-scope="scope"><span>{{ scope.row.value }}</span></template></el-table-column><el-table-column label="創建時間" align="center"><template slot-scope="scope"><span>{{ scope.row.createTime }}</span></template></el-table-column></el-table><!-- 導入彈框 --><el-dialog title="導入" :visible.sync="dialogImportVisible" width="480px"><el-form label-position="right" label-width="170px"><el-form-item label="文件"><el-upload:multiple="false":on-success="onUploadSuccess":action="'http://localhost:8202/admin/cmn/dict/importData'"class="upload-demo"><el-button size="small" type="primary">點擊上傳</el-button><div slot="tip" class="el-upload__tip">只能上傳Excel文件，且不超過500kb</div></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogImportVisible = false">取消</el-button></div></el-dialog></div> </template><script> import dict from "@/api/dict"; export default {data() {return {list: [], // 數據字典列表數組listLoading: true,dialogImportVisible: false};},created() {this.getDictList(1);},methods: {// 彈出導入彈窗importData() {this.dialogImportVisible = true;},// 導入成功后的提醒onUploadSuccess(response, file) {this.$message.info("上傳成功");this.dialogImportVisible = false;this.getDictList(1);},// 數據字典列表getDictList(id) {dict.dictList(id).then(response => {this.list = response.data;});},getChildrens(tree, treeNode, resolve) {dict.dictList(tree.id).then(response => {resolve(response.data);});},// 導出功能exportData() {window.location.href = "http://localhost:8202/admin/cmn/dict/exportData";}} }; </script>

三?測試

1?清空數據

DROP table dictCREATE TABLE `dict` (`id` bigint(20) NOT NULL DEFAULT '0' COMMENT '主鍵id',`parent_id` bigint(20) NOT NULL DEFAULT '0' COMMENT '上級id',`name` varchar(100) NOT NULL DEFAULT '' COMMENT '名稱',`value` bigint(20) DEFAULT NULL COMMENT '值',`dict_code` varchar(20) DEFAULT NULL COMMENT '編碼',`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '創建時間',`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新時間',`is_deleted` tinyint(3) unsigned zerofill NOT NULL DEFAULT '0' COMMENT '刪除標記（0:可用 1:已刪除）',PRIMARY KEY (`id`),KEY `idx_dict_code` (`dict_code`),KEY `idx_parent_id` (`parent_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='數據字典';

2?準備表格

3?上傳該表格的結果

總結

以上是生活随笔為你收集整理的vue 实现 excel 的导入功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。