export-table

$3

``shell
#安装
npm i export-table -S
#引入
import ExportPlus from 'export-table'
`

$3

`javascript
new ExportPlus(exportOptions)
`

##### 参数

| 名称 | 类型 | 必填 | 描述 |
| ------------- | ------ | ---- | ------------------------------- |
| exportOptions | Object | 否 | {title, describe, saveFileName} |

##### exportOptions

| 名称 | 类型 | 必填 | 描述 |
| ------------ | ------ | ---- | -------------- |
| title | String | 否 | 表格标题 |
| describe | String | 否 | 表格描述 |
| saveFileName | String | 否 | 保存的文件名称 |

##### 实列

`javascript
const ExportTable = new ExportPlus({ title: '表格标题', describe: '查询条件' })
`

$3

`javascript
ExportTable.table_xlsx(VueComponent)
`

##### 参数

| 名称 | 类型 | 必填 | 描述 |
| ------------ | ------------ | ---- | ---- |
| VueComponent | VueComponent | 是 | dom |

##### 实列

`html

ref="el-table"
:data="tableData"
style="width: 100%">

`

$3

`javascript
ExportTable.json_xlsx(tableData, columns, options)
`

##### 参数

| 名称 | 类型 | 必填 | 描述 |
| --------- | ------ | ---- | ---------------------- |
| tableData | Array | 是 | 数据 |
| columns | Array | 是 | 表头 |
| options | Object | 否 | {cellMerge, cellStyle} |

##### options

| 名称 | 描述 | |
| ----------- | ---------- | ------------------------- |
| cellMerge | 合并 | rowIndex，columnIndex |
| cellStyle | 自定义样式 | value |

##### 实列

`javascript
// 数据
let tableData = [
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '1518 弄',
zip: 200333
},
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '1518 弄',
zip: 200333
},
{
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '1518 弄',
zip: 200333
},
{
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '1518 弄',
zip: 200333
},
{
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '1518 弄',
zip: 200333
},
{
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '1518 弄',
zip: 200333
},
{
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '1518 弄',
zip: 200333
}
]
// 表头信息
let columns = [
{ prop: 'date', title: '日期' },
{
title: '配送信息',
children: [
{ prop: 'name', title: '姓名' },
{
title: '地址',
children: [
{ prop: 'province', title: '省份' },
{ prop: 'city', title: '市区' },
{ prop: 'address', title: '地址' }
]
}
]
},
{ prop: 'zip', title: '邮编' }
]
// 创建导出对象
const ExportTable = new ExportPlus({ title: '表格标题', describe: '查询条件' })
// 导出表格
ExportTable.json_xlsx(tableData, columns)
`

##### cellStyle设置单元格样式

- cellStyle({ prop, value })返回值style

`javascript
function: cellStyle({prop, value}) {
// 当是id列时设置字体颜色
if (prop === 'id') {
return {
fontColor: 'ff0000'
}
} else {
return {}
}
}
let tableData = [] // 表单数据
let columns = [] // 表头
// 定义导出实列
const ExportTable = new ExportPlus()
// 导出表格
ExportTable.json_xlsx(tableData, columns, { cellStyle })
`

##### style

- fontSize --字体大小Number
- verticalAlignment --竖直方向对齐方式，可选center,right,left
- horizontalAlignment --横向对齐位置，可选center,right,left
- border --是否显示边框，可选fasle,true
- borderColor --边框颜色CCCCCC
- fontColor --字体颜色000000
- fill --单元格背景FFFFFF

##### cellFormat格式化单元格数据

- cellFormat({ prop, value })

`javascript
function: cellFormat({prop, value}) {
// 当是id列时格式化数据
if (prop === 'id') {
value = 'id' + value
}
return value
}
let tableData = [] // 表单数据
let columns = [] // 表头
// 定义导出实列
const ExportTable = new ExportPlus()
// 导出表格
ExportTable.json_xlsx(tableData, columns, { cellFormat })
`

##### cellMerge合并表格数据

- cellMerge({rowIndex, columnIndex})

`javascript
function: cellMerge({rowIndex, columnIndex}) {
// rowIndex 行标
// columnIndex 列标
// 第0列起向下合并两个单元格
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1
}
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
}
let tableData = [] // 表单数据
let columns = [] // 表头
// 定义导出实列
const ExportTable = new ExportPlus()
// 导出表格
ExportTable.json_xlsx(tableData, columns, { cellMerge })
``