简体中文

🌱vue2.x

1# 安装依赖
2npm install com-excel-import-export --save
3# or
4yarn add com-excel-import-export --save
5
6# main.js 导入 or 组件引用 
7import comExcel from 'com-excel-import-excel'
8
9Vue.install(comExcel)
10
11
12# 示例1 组件使用
13<com-excel-import-excel ref="excel-import"/>
14this.$refs['excelImport'].importToExcel()
15this.$refs['excelImport'].exportExport()
16
17
18# 示例2 api使用
19# 导入表格
20this.$excelFile.importToExcel(function (res) {
21  console.log(res)
22})
23
24# 导出数据表格
25this.$excelFile.exportExport([
26    { value: '测试数据11', value1: '测试数2据' ,value3: '测试数据33333'},
27    { value: '似懂非懂', value1: '测试数2据' ,value3: '测试数据33333'},
28    { value: '测试数据11', value1: '第三方的身份' ,value3: '测试数据33333'},
29    { value: '测试数据11', value1: '测试数2据' ,value3: '的身份水电费'},
30    { value: '测试数据11', value1: '测试数2据' ,value3: '测试数据33333'},
31    { value: '测试数据11', value1: '测试数2据' ,value3: '测试数据33333'},
32  ],
33  [
34    {
35      label: '标题1', prop: 'value1',
36      children: [
37        { label: '标题1-1', prop: 'value' },
38        { label: '标题1-2', prop: 'value' },
39        { label: '标题1-3', prop: 'value',  
40        children: [
41            { label: '标题1-3-1', prop: 'value' ,
42             children: [
43                { label: '标题1-3-1-2', prop: 'value' },
44                { label: '标题1-3-1-2', prop: 'value' },
45                { label: '标题1-3-1-3', prop: 'value' },
46                { label: '标题1-3-1-4', prop: 'value' },
47              ],},
48            { label: '标题1-3-2', prop: 'value' },
49            { label: '标题1-3-3', prop: 'value' },
50            { label: '标题1-3-4', prop: 'value' ,
51            children: [
52                { label: '标题1-3-4-1', prop: 'value' },
53                { label: '标题1-3-4-2', prop: 'value' },
54                { label: '标题1-3-4-3', prop: 'value' },
55                { label: '标题1-3-4-4', prop: 'value' },
56              ],
57              },
58          ], },
59        { label: '标题1-4', prop: 'value',
60         children: [
61            { label: '标题1-1', prop: 'value' },
62            { label: '标题1-2', prop: 'value' },
63            { label: '标题1-3', prop: 'value' },
64            { label: '标题1-4', prop: 'value' },
65          ], },
66      ],
67    },
68    { label: '标题2', prop: 'value1' },
69    { label: '标题3', prop: 'value3' },
70    { label: '标题4', prop: 'value1' },
71])
72

🔊 友情链接

• uView uni-app 生态最优秀的 UI 框架

🎨 鸣谢

Project
vue
element-ui
element-plus
mock
axios

💚 适合人群

• 正在以及想使用 element-ui/element-plus 开发，前端开发经验 1 年+。
• 熟悉 Vue.js 技术栈，使用它开发过几个实际项目。
• 对原理技术感兴趣，想进阶和提升的同学。