# Q-Export 表格导出
# 基础用法
注意
1.多级表头不支持使用勾选导出列功能。
2.多级表头之间一定需要一个单列进行分割，否则导出数据错位。
Copy
# 样例
<template>
<el-dialog title="导出" :visible.sync="openExport" fullscreen width="500px" append-to-body>
<QTable :columns="tableColumn"
:options="dict.type"
:show-tool="true"
:fileName="excelConfig.sheet.name"
:excelConfig="excelConfig"
:fetch="listStock"
:fetchParams="queryParams"
>
</QTable>
<div slot="footer" class="dialog-footer">
<el-button @click="openExport = false">关 闭</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
openExport: false,
excelConfig: {
sheet: {
name: '预警规则'
}
},
tableColumn: [
{
type: 'selection',
label: 'selection',
visible: true
},
{
type: 'index',
label: '序号',
visible: true
},
{
prop: 'businessType',
label: '业务类型',
type: 'dict.ywlx',
visible: true
}
],
}
},
}
</script>
# Attributes
exportExcel(sheetsData, fileName, mode, name)函数的具体参数讲解,手动导出示例。
WARNING
1.type: 'dict.ywlx' / pattern: 'dict.ywlx' ,字典(不区分大小写)必须包含dict这个单词，且必须以.xxx结尾。
2.options的格式必须是如下格式的对象,例如
3.mode默认为false,即多个sheet页导出，如果为true,则一个sheet页全部导出,可以通过设置name为sheet名字。
const options = {
code: [
{label: 1, value: 1}
],
code2: [
{label: 1, value: 1}
]
}
sheetsData参数的手动导出示例代码
const setting = [
{
tableColumn: [
{
prop: 'businessType',
label: '业务类型',
type: 'dict.ywlx'
},
{
prop: 'supplierName',
label: '供应商'
},
],
tableData: [this.form],
excelConfig: {
options: this.dict.type,
sheet: {
name: '商品入库基本信息'
}
}
},
{
tableColumn: this.tableColumns,
tableData: this.tableData,
excelConfig: {
options: this.dict.type,
//type:'table', //mode必须为false
sheet: {
name: '商品入库清单信息'
},
footData: [{
content: '111111'
}]
}
}]
await this.$QUtils.ExportUtil.exportExcel(setting, '商品入库信息导出_' + new Date().getTime(), true, '商品入库信息导出')
| 字段 | 参数1 | 参数2 | 参数3 | 参数4 |
|---|---|---|---|---|
| 参数 | tableColumn | tableData | fileName | excelConfig |
| 含义 | tableColumn | 表格数据 | — | — |
| 默认值 | [] | [] | 导出_${Date.now()}.xlsx | {} |
# tableColumn
tableColumn具体属性讲解
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| prop | 参数 | String | — | — |
| label | 标签 | String | — | — |
| type /pattern | 类型 | index /selection/ dict.xxx | — | — |
| width | 表格宽度 | String /Number | — | auto |
| excelWidth | excel宽度 | Number | — | 20 |
# excelConfig
excelConfig具体属性讲解
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| titleAlignment / alignment | 对齐方式 | Object | — | alignment |
| titleFont /headerFont / font | 文本 | Object | — | font |
| titleFill /headerFill / fill | 填充 | Object | — | fill |
| sheet | 工作表 | Object | — | {name:sheet1} |
| options | 字典数据 | Object | — | {} |
| excelWidth | 宽度 | Number | — | 20 |
| type | 类型(mode为false可用) | String | table | — |
| tableConfig | 表格配置(type为table) | Object | — | tableConfig |
| spaceConfig | 设置间隔(mode为true可用) | Object | — | {number:3} |
| footData | 追加内容 | Array | [{content:'',config:{}] | — |
# alignment
alignment具体属性讲解
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| vertical | 垂直 | String | top/middle/bottom distributed/justify | middle |
| horizontal | 水平 | String | left/center/rightfill/justify/distributedcenterContinuous | center |
| wrapText | 换行 | Boolean | — | false |
| textRotation | 文本旋转 | Number / String | -90~90/vertical | — |
# font
font具体属性讲解
| 属性名 | 说明 | 类型 | 可选值 | 默认值(标题/表头/内容) |
|---|---|---|---|---|
| name | 文本字体 | String | — | 楷体/Arial /宋体 |
| size | 字体大小 | String | — | 16/12/10 |
| bold | 加粗 | Boolean | — | true/false |
| color | 字体颜色 | Object | { argb: 'FFFFFF'} | — |
# fill
fill具体属性讲解参考官网 (opens new window)
| 属性名 | 说明 | 类型 | 可选值 | 默认值(标题/表头/内容) |
|---|---|---|---|---|
| type | 填充使用模式 | String | — | pattern/ pattern/— |
| pattern | 模式类型 | String | — | solid/solid/— |
| fgColor | 颜色 | Object | — | {argb: '409EFF'} /{argb: '909399'} /— |
# border
border具体属性讲解参考官网 (opens new window)
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| top | 上边 | Object | — | {style: 'thin'} |
| left | 左边 | Object | — | {style: 'thin'} |
| bottom | 下边 | Object | — | {style: 'thin'} |
| right | 右边 | Object | — | {style: 'thin'} |
# tableConfig
tableConfig具体属性讲解参考官网 (opens new window)
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| name | 表格名称 | String | — | 'table' + (index + 1) |
| ref | 表格名称 | String | — | 'A1' |
| headerRow | 在表格顶部显示标题 | Boolean | — | true |
| totalsRow | 在表格底部显示总计 | Boolean | — | true |
| style | 额外的样式属性 | Object | — | {theme: 'TableStyleMedium2',showRowStripes: true} |
基础样式代码
let baseConfig = {
headerFont: {
name: 'Arial', // 字体
size: 12, // 字号
bold: true, // 是否加粗
color: {argb: 'FFFFFF'}
},
headerFill: {
type: 'pattern',
pattern: 'solid',
fgColor: {argb: '909399'}
},
titleFont: {
name: '楷体', // 字体
size: 16, // 字号
bold: true, // 是否加粗
color: {argb: 'FFFFFF'}
},
titleFill: {
type: 'pattern',
pattern: 'solid',
fgColor: {argb: '409EFF'}
},
titleAlignment: {
vertical: 'middle', // 垂直居中
horizontal: 'center' // 水平居中
},
alignment: {
vertical: 'middle', // 垂直居中
horizontal: 'center' // 水平居中
},
border: {
top: {style: 'thin'},
left: {style: 'thin'},
bottom: {style: 'thin'},
right: {style: 'thin'}
},
font: {
name: '宋体',
size: 10
},
options: {},
excelWidth: 20,
type: 'base',
sheet: {
name: 'sheet' + (index + 1)
},
tableConfig: {
name: 'table' + (index + 1),
ref: 'A1',
headerRow: true,
totalsRow: false,
style: {
theme: 'TableStyleMedium2',
showRowStripes: true
}
},
spaceConfig: {
number: 3
}
}