{"id":19990495,"url":"https://github.com/dream2023/vue-ele-import","last_synced_at":"2025-05-04T09:35:51.512Z","repository":{"id":34907964,"uuid":"188846294","full_name":"dream2023/vue-ele-import","owner":"dream2023","description":"超简单、好用的 element-ui Excel 导入组件","archived":true,"fork":false,"pushed_at":"2023-01-03T22:47:15.000Z","size":6799,"stargazers_count":58,"open_issues_count":28,"forks_count":19,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-11T01:11:16.838Z","etag":null,"topics":["element","element-excel","element-import","excel","excel-import","vue","vue-component","vue-ele-import","vue-excel"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dream2023.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-27T13:13:46.000Z","updated_at":"2024-04-30T01:20:00.000Z","dependencies_parsed_at":"2023-01-15T10:15:35.621Z","dependency_job_id":null,"html_url":"https://github.com/dream2023/vue-ele-import","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dream2023%2Fvue-ele-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dream2023","download_url":"https://codeload.github.com/dream2023/vue-ele-import/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223968413,"owners_count":17233445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["element","element-excel","element-import","excel","excel-import","vue","vue-component","vue-ele-import","vue-excel"],"created_at":"2024-11-13T04:51:16.054Z","updated_at":"2024-11-13T04:51:49.687Z","avatar_url":"https://github.com/dream2023.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# vue-ele-import | 超简单、好用的 element-ui Excel 导入组件\n\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg)](https://opensource.org/licenses/mit-license.php)\n[![npm](https://img.shields.io/npm/v/vue-ele-import.svg)](https://www.npmjs.com/package/vue-ele-import)\n[![download](https://img.shields.io/npm/dw/vue-ele-import.svg)](https://npmcharts.com/compare/vue-ele-import?minimal=true)\n\n## 介绍\n\nvue-ele-import 利用 element ui 组件库完成的 Excel 导入数据组件, 主要特点如下:\n\n- 简单：仅需一行 html 代码\n- 直观：分步骤进行、错误表格显示\n- 强大：数据校检、数据转化一步完成\n\n\u003c!-- ## 效果图 --\u003e\n\n![演示图](./public/example.gif)\n\n## 安装\n\n```bash\nnpm install vue-ele-import --save\n```\n\n## 使用\n\n```js\n// 全局引入\nimport EleImport from 'vue-ele-import'\nVue.component(EleImport.name, EleImport)\n```\n\n```js\n// 局部引入\nimport EleImport from 'vue-ele-import'\nexport default {\n  components: {\n    EleImport\n  }\n}\n```\n\n## 示例\n\n[点我看在线示例](https://codepen.io/dream2023/pen/NVBKRy)\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cele-import\n      :fields=\"fields\"\n      :filepath=\"filepath\"\n      :append=\"append\"\n      :formatter=\"formatter\"\n      :requestFn=\"requestFn\"\n      :rules=\"rules\"\n      :tips=\"tips\"\n      :title=\"title\"\n      :visible.sync=\"visible\"\n      @close=\"handleCloseImport\"\n      @finish=\"handleFinishImport\"\n    /\u003e\n    \u003cel-button @click=\"handleOpen\" type=\"primary\"\u003e点我打开\u003c/el-button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    name: 'App',\n    data() {\n      return {\n        // 弹窗的标题\n        title: '导入人员',\n        // 提示信息\n        tips: ['名字必填', '年龄必填', '年龄请填写数字'],\n        // 假如数据库中是`name`字段, 而Excel模板列是`名字`, 就需要写成 name: '名字'\n        // ele-import 内部会抛弃非定义在fields里的列\n        fields: {\n          name: '名字',\n          age: '年龄',\n          city: '所在城市'\n        },\n        // formatter起到替换数据的作用\n        formatter: {\n          // 可以是对象, 在发送请求时, '深圳' 将被替换成 1, '广州' 被替换成 2\n          city: {\n            1: '深圳',\n            2: '广州'\n          },\n          // 可以是函数, 在发送请求时, `age` 将加1, 例如 原数据是 19 -\u003e 20\n          age: function(value, row) {\n            return value + 1\n          }\n        },\n        // 附加数据, 在每条记录上都会加这两个字段和值\n        append: {\n          company: '腾讯',\n          leader: '小马哥'\n        },\n        // 参数校检, 和 element-ui 中 form表单中传递的rules一样, 都是使用的 async-validator 库\n        // https://element.eleme.cn/#/zh-CN/component/form#biao-dan-yan-zheng\n        rules: {\n          name: { type: 'string', required: true, message: '名字必填' },\n          age: [\n            { type: 'number', message: '年龄必须为数字' },\n            { required: true, message: '年龄必须填写' }\n          ]\n        },\n        // Excel模板下载地址\n        // 注意, 只能是.xlsx的文件, .xls或者.cvs都会报错\n        filepath:\n          'https://raw.githubusercontent.com/dream2023/vue-ele-import/master/public/user.xlsx',\n        // 控制弹窗, 和dialog的visible一样\n        // https://element.eleme.cn/#/zh-CN/component/dialog\n        visible: false\n      }\n    },\n    methods: {\n      // requestFn函数会被注入请求的数据\n      // 需要返回一个Promise对象\n      async requestFn(data) {\n        // 演示代码\n        // 1、如果没有针对ele-import做过接口约定, 可以采用如下形式:\n        // try {\n        //   const res = await axios.post('/user', data)\n        //   return Promise.resolve()\n        // } catch (error) {\n        //   // error经过一系列转化, 转为\n        //   const errorData = this.getErrorMessage(error)\n        //   {0:{ age: '年龄为数字', city: '城市必填'}, 2:{ age: '年龄为数字'} } // 0 和 2 分别是行号\n        //   return Promise.reject(errorData)\n        // }\n        // 2、如果针对ele-import做过接口约定, 当校检错误时, 后端返回的 error 就是上述错误形式, 则可直接\n        // return axios.post('/user', data)\n        // 总结: 无论如何总要返回一个Promise对象\n      },\n      handleCloseImport() {\n        console.log('弹窗关闭了~')\n      },\n      handleFinishImport() {\n        console.log('导入完毕了~')\n      },\n      handleOpen() {\n        this.visible = true\n      }\n    },\n    mounted() {}\n  }\n\u003c/script\u003e\n```\n\n## Props 参数\n\n```js\nprops: {\n  // 文件路径\n  filepath: {\n    type: String,\n    required: true\n  },\n  // 请求方法\n  requestFn: {\n    type: Function,\n    required: true\n  },\n  // 字段\n  fields: {\n    type: Object,\n    required: true\n  },\n  // 是否显示弹窗\n  visible: {\n    type: Boolean,\n    required: true\n  },\n  // 弹窗标题\n  title: {\n    type: String,\n    default: '批量导入'\n  },\n  // 提示信息，数组\n  tips: Array,\n  // 增加附加数据\n  append: Object,\n  // 验证规则\n  rules: Object,\n  // 格式化数据\n  formatter: {\n    type: Object\n  },\n  // 弹窗宽度\n  dialogWidth: {\n    type: String,\n    default: '80%'\n  }\n}\n```\n\n## 参考链接\n\n- [vue-element-admin excel 组件](https://github.com/PanJiaChen/vue-element-admin/)\n- [element-ui dialog 组件](https://element.eleme.cn/#/zh-CN/component/dialog)\n- [element-ui steps 组件](https://element.eleme.cn/#/zh-CN/component/steps)\n- [blueimp/Gallery](https://github.com/blueimp/Gallery)\n- [xlsx](https://github.com/SheetJS/js-xlsx)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdream2023%2Fvue-ele-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdream2023%2Fvue-ele-import/lists"}