348c01e6b0
参数 "table" 两处笔误，应为 "title" Former-commit-id: 0602b1b6f88b8d5da2e8a282c2801066ab31a993 [formerly 0602b1b6f88b8d5da2e8a282c2801066ab31a993 [formerly 0602b1b6f88b8d5da2e8a282c2801066ab31a993 [formerly 0602b1b6f88b8d5da2e8a282c2801066ab31a993 [formerly 7cf742f21de371dd570742a52450551d1622243a [formerly 7b38d2355c1004b98cc82374a00e1ea7fbf2a1c9]]]]] Former-commit-id: 72d3d3cf71a674258f3ea847575f10a8eb69aa6c Former-commit-id: f2cad67eeea7e980479a0d99380125c72ef50da0 Former-commit-id: 5e899662f5b06b09ed035f60011949c4be8c6dc2 [formerly ced43cbdc9ec64a760c1fae4761f7042ef1ee23e] Former-commit-id: 7edcad70cf9f9bb6346c697502437cf55ecaf432 Former-commit-id: 8d542feeab89f94b3f6ac6b38ecc7abe655fcd03 Former-commit-id: 7ada3b74741398287f781f7c909952fa36a6002f Former-commit-id: 1b834cf5ff936e0691aad408401b6cd7adbdafdc Former-commit-id: ff96395f8eb0914df8c2a4564dc3b269ba98a5a6
149 lines
2.3 KiB
Markdown
149 lines
2.3 KiB
Markdown
# 表格导出
|
|
|
|
本框架集成了数据导出功能，并包装成插件
|
|
|
|
## 注册插件
|
|
|
|
``` js
|
|
import pluginExport from '@/plugin/export'
|
|
Vue.use(pluginExport)
|
|
```
|
|
|
|
之后就可以在组件中使用 `this.$export` 来调用导出功能
|
|
|
|
::: tip
|
|
d2admin 已经帮你注册好，可以直接使用，无需写上面的代码
|
|
:::
|
|
|
|
## 导出 csv
|
|
|
|
此方法将数据以 `csv` 格式导出，并且返回一个 `Promise` 对象
|
|
|
|
使用
|
|
|
|
``` js
|
|
this.$export.csv({
|
|
columns,
|
|
data
|
|
})
|
|
.then(() => {
|
|
// ...可选回调
|
|
})
|
|
```
|
|
|
|
参数
|
|
|
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
| --- | --- | --- | --- | --- | --- |
|
|
| columns | 列 | 非 | Array | | 空数组 |
|
|
| data | 行数据 | 非 | Array | | 空数组 |
|
|
| title | 文件名 | 非 | String | | table |
|
|
| noHeader | 不导出表头 | 非 | Boolean | | false |
|
|
| separator | 数据分隔符 | 非 | String | | , |
|
|
| quoted | 每项数据是否加引号 | 非 | Boolean | | false |
|
|
|
|
示例
|
|
|
|
``` js
|
|
const columns = [
|
|
{
|
|
label: '姓名',
|
|
prop: 'name'
|
|
},
|
|
{
|
|
label: '年龄',
|
|
prop: 'age'
|
|
}
|
|
]
|
|
const data = [
|
|
{
|
|
name: 'lucy',
|
|
age: 24
|
|
},
|
|
{
|
|
name: 'bob',
|
|
age: 26
|
|
}
|
|
]
|
|
this.$export.csv({
|
|
columns,
|
|
data
|
|
})
|
|
```
|
|
|
|
## 导出 xlsx
|
|
|
|
此方法将数据以 `xlsx` 格式导出，并且返回一个 `Promise` 对象
|
|
|
|
使用
|
|
|
|
``` js
|
|
this.$export.excel({
|
|
columns,
|
|
data
|
|
})
|
|
.then(() => {
|
|
// ...可选回调
|
|
})
|
|
```
|
|
|
|
参数
|
|
|
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
| --- | --- | --- | --- | --- | --- |
|
|
| columns | 列 | 非 | Array | | 空数组 |
|
|
| data | 行数据 | 非 | Array | | 空数组 |
|
|
| title | 文件名 | 非 | String | | table |
|
|
|
|
示例
|
|
|
|
``` js
|
|
const columns = [
|
|
{
|
|
label: '姓名',
|
|
prop: 'name'
|
|
},
|
|
{
|
|
label: '年龄',
|
|
prop: 'age'
|
|
}
|
|
]
|
|
const data = [
|
|
{
|
|
name: 'lucy',
|
|
age: 24
|
|
},
|
|
{
|
|
name: 'bob',
|
|
age: 26
|
|
}
|
|
]
|
|
this.$export.excel({
|
|
columns,
|
|
data
|
|
})
|
|
```
|
|
|
|
## 导出 txt
|
|
|
|
此方法将数据以 `txt` 格式导出，并且返回一个 `Promise` 对象
|
|
|
|
使用
|
|
|
|
``` js
|
|
this.$export.txt({
|
|
text: '文本内容',
|
|
title: '文件名'
|
|
})
|
|
.then(() => {
|
|
// ...可选回调
|
|
})
|
|
```
|
|
|
|
参数
|
|
|
|
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
|
|
| --- | --- | --- | --- | --- | --- |
|
|
| text | 文件内容 | 非 | String | | 空 |
|
|
| title | 文件名 | 非 | String | | 文本 |
|