2018-02-11 08:51:01 +08:00
|
|
|
# Vue.$export
|
2018-02-10 22:12:33 +08:00
|
|
|
|
2018-02-11 09:34:17 +08:00
|
|
|
本框架集成了数据导出功能,并包装成插件
|
2018-02-10 22:17:43 +08:00
|
|
|
|
2018-02-11 08:51:01 +08:00
|
|
|
## 注册插件
|
2018-02-10 22:12:33 +08:00
|
|
|
|
2018-02-11 09:34:17 +08:00
|
|
|
> 默认已经注册,可以直接使用
|
|
|
|
|
|
2018-02-10 22:12:33 +08:00
|
|
|
```
|
|
|
|
|
import pluginExport from '@/plugin/export'
|
|
|
|
|
Vue.use(pluginExport)
|
|
|
|
|
```
|
|
|
|
|
|
2018-02-11 08:51:01 +08:00
|
|
|
之后就可以在组件中使用 `this.$export` 来调用导出功能
|
2018-02-10 22:17:43 +08:00
|
|
|
|
2018-02-11 09:34:17 +08:00
|
|
|
## Vue.$export.csv()
|
2018-02-11 08:51:01 +08:00
|
|
|
|
2018-02-11 22:38:55 +08:00
|
|
|
此方法将数据以 `CSV` 格式导出,并且返回一个 `Promise` 对象
|
2018-02-11 08:51:01 +08:00
|
|
|
|
|
|
|
|
使用
|
2018-02-10 22:12:33 +08:00
|
|
|
|
2018-02-10 22:59:54 +08:00
|
|
|
```
|
|
|
|
|
this.$export.csv({
|
|
|
|
|
columns,
|
|
|
|
|
data
|
|
|
|
|
})
|
2018-02-12 18:25:17 +08:00
|
|
|
.then(() => {
|
2018-02-10 23:07:32 +08:00
|
|
|
// ...可选回调
|
|
|
|
|
})
|
2018-02-10 22:59:54 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
参数
|
|
|
|
|
|
|
|
|
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
|
|
|
| --- | --- | --- | --- | --- | --- |
|
|
|
|
|
| columns | 列 | 非 | Array | | 空数组 |
|
|
|
|
|
| data | 行数据 | 非 | Array | | 空数组 |
|
2018-02-11 22:16:42 +08:00
|
|
|
| table | 文件名 | 非 | String | | table |
|
2018-02-10 22:59:54 +08:00
|
|
|
| noHeader | 不导出表头 | 非 | Boolean | | false |
|
|
|
|
|
| separator | 数据分隔符 | 非 | String | | , |
|
|
|
|
|
| quoted | 每项数据是否加引号 | 非 | Boolean | | false |
|
|
|
|
|
|
|
|
|
|
示例
|
|
|
|
|
|
2018-02-10 22:12:33 +08:00
|
|
|
```
|
2018-02-10 22:51:36 +08:00
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
label: '姓名',
|
|
|
|
|
prop: 'name'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '年龄',
|
|
|
|
|
prop: 'age'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
const data = [
|
|
|
|
|
{
|
|
|
|
|
name: 'lucy',
|
|
|
|
|
age: 24
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'bob',
|
|
|
|
|
age: 26
|
|
|
|
|
}
|
|
|
|
|
]
|
2018-02-10 22:12:33 +08:00
|
|
|
this.$export.csv({
|
2018-02-10 22:51:36 +08:00
|
|
|
columns,
|
|
|
|
|
data
|
2018-02-10 22:12:33 +08:00
|
|
|
})
|
2018-02-11 18:10:34 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Vue.$export.excel()
|
|
|
|
|
|
2018-02-11 22:38:55 +08:00
|
|
|
此方法将数据以 `xlsx` 格式导出,并且返回一个 `Promise` 对象
|
|
|
|
|
|
2018-02-11 18:10:34 +08:00
|
|
|
使用
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
this.$export.excel({
|
|
|
|
|
columns,
|
|
|
|
|
data
|
|
|
|
|
})
|
2018-02-12 18:25:17 +08:00
|
|
|
.then(() => {
|
2018-02-11 18:10:34 +08:00
|
|
|
// ...可选回调
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
参数
|
|
|
|
|
|
|
|
|
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
|
|
|
| --- | --- | --- | --- | --- | --- |
|
|
|
|
|
| columns | 列 | 非 | Array | | 空数组 |
|
|
|
|
|
| data | 行数据 | 非 | Array | | 空数组 |
|
2018-02-11 22:16:42 +08:00
|
|
|
| table | 文件名 | 非 | String | | table |
|
2018-02-11 18:10:34 +08:00
|
|
|
|
|
|
|
|
示例
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
label: '姓名',
|
|
|
|
|
prop: 'name'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '年龄',
|
|
|
|
|
prop: 'age'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
const data = [
|
|
|
|
|
{
|
|
|
|
|
name: 'lucy',
|
|
|
|
|
age: 24
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'bob',
|
|
|
|
|
age: 26
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
this.$export.excel({
|
|
|
|
|
columns,
|
|
|
|
|
data
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|
2018-02-12 18:05:37 +08:00
|
|
|
## Vue.$export.txt()
|
|
|
|
|
|
2018-02-12 18:17:49 +08:00
|
|
|
此方法将数据以 `xlsx` 格式导出,并且返回一个 `Promise` 对象
|
|
|
|
|
|
|
|
|
|
使用
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
this.$export.excel({
|
|
|
|
|
columns,
|
|
|
|
|
data
|
|
|
|
|
})
|
2018-02-12 18:25:17 +08:00
|
|
|
.then(() => {
|
2018-02-12 18:17:49 +08:00
|
|
|
// ...可选回调
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
参数
|
|
|
|
|
|
|
|
|
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
|
|
|
| --- | --- | --- | --- | --- | --- |
|
|
|
|
|
| columns | 列 | 非 | Array | | 空数组 |
|
|
|
|
|
| data | 行数据 | 非 | Array | | 空数组 |
|
|
|
|
|
| table | 文件名 | 非 | String | | table |
|
|
|
|
|
|
|
|
|
|
示例
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
```
|