在实际业务中表格列经常需要使用插槽Slot来自定义渲染复杂内容例如多行信息、图标、按钮等。然而vxe-table 的默认导出功能只能导出单元格的原始数据即 field 绑定的字段值无法识别插槽中的 HTML 结构。为了解决这个问题vxe-table 提供了 export-method 属性允许你为特定列自定义导出内容从而实现插槽模板的完美导出。解决问题问题原因解决方案插槽内容导出为空或显示异常导出引擎读取的是 field 对应的原始值而非插槽渲染后的 DOM使用列的 export-method 属性自定义导出数据export-method 是一个函数它接收当前行数据作为参数返回一个字符串或数字该字符串将作为导出的单元格内容。代码templatedivvxe-buttontatusprimaryclickexportEvent直接导出 XLSX 文件/vxe-buttonvxe-tableborderreftableRef:export-configexportConfig:datatableDatavxe-columnfieldseqtypeseqwidth70/vxe-columnvxe-colgrouptitle分组1vxe-columnfieldnametitleName/vxe-columnvxe-columnfieldsextitleSex:cell-rendersexCellRender/vxe-column/vxe-colgroupvxe-columnfielddescribetitleDescribe:export-methoddescribeExportMethodtemplate#default{ row }div编号{{ row.no1 }}/divdiv职位{{ row.role }}/divdiv年龄{{ row.age }}/div/template/vxe-column/vxe-table/div/templatescriptsetupimport{ref,reactive}fromvueconsttableRefref()consttableDataref([{id:10001,name:张三,role:Develop,sex:1,age:28,no1:028,no2:028,describe:},{id:10002,name:李四,role:研发,sex:0,age:36,no1:220,no2:220,describe:},{id:10003,name:王五,role:产品经理,sex:1,age:44,no1:003200,no2:003200,describe:},{id:10004,name:老六,role:Designer,sex:0,age:38,no1:02040,no2:02040,describe:}])constexportConfigreactive({asyncsheetMethod(params){const{worksheet}params worksheet.eachRow((excelRow,i){// 设置行高if(i2){excelRow.height80}})}})constsexCellRenderreactive({name:FormatSelect,options:[{label:女,value:0},{label:男,value:1}]})constdescribeExportMethod({row}){return自定义编号${row.no1}\n自定义职位${row.role}\n自定义年龄${row.age}}constexportEvent(){const$tabletableRef.valueif($table){$table.exportData({type:xlsx})}}/script配置说明export-method 属性作用覆盖列默认的导出数据逻辑。类型Function({ row, column, columnIndex }) string | number返回值导出的单元格内容字符串或数字。export-config 与 sheetMethod作用在导出时对 Excel 工作表进行高级定制例如设置行高、列宽、样式等。本例为所有数据行统一设置行高为 80使多行文本在 Excel 中完整显示。cell-render 与导出的关系使用 cell-render如示例中的 FormatSelect定义的列无需额外处理导出时会自动根据 options 映射为对应的标签文本。内容格式列宽与行高导出的 Excel 默认列宽可能无法完全显示多行文本建议在 sheetMethod 中设置合适的行高和列宽。换行符在导出文本中使用 \nExcel 会自动识别为单元格内的换行。https://vxetable.cn
在实际业务中表格列经常需要使用插槽Slot来自定义渲染复杂内容例如多行信息、图标、按钮等。然而vxe-table 的默认导出功能只能导出单元格的原始数据即 field 绑定的字段值无法识别插槽中的 HTML 结构。为了解决这个问题vxe-table 提供了 export-method 属性允许你为特定列自定义导出内容从而实现插槽模板的完美导出。解决问题问题原因解决方案插槽内容导出为空或显示异常导出引擎读取的是 field 对应的原始值而非插槽渲染后的 DOM使用列的 export-method 属性自定义导出数据export-method 是一个函数它接收当前行数据作为参数返回一个字符串或数字该字符串将作为导出的单元格内容。代码templatedivvxe-buttontatusprimaryclickexportEvent直接导出 XLSX 文件/vxe-buttonvxe-tableborderreftableRef:export-configexportConfig:datatableDatavxe-columnfieldseqtypeseqwidth70/vxe-columnvxe-colgrouptitle分组1vxe-columnfieldnametitleName/vxe-columnvxe-columnfieldsextitleSex:cell-rendersexCellRender/vxe-column/vxe-colgroupvxe-columnfielddescribetitleDescribe:export-methoddescribeExportMethodtemplate#default{ row }div编号{{ row.no1 }}/divdiv职位{{ row.role }}/divdiv年龄{{ row.age }}/div/template/vxe-column/vxe-table/div/templatescriptsetupimport{ref,reactive}fromvueconsttableRefref()consttableDataref([{id:10001,name:张三,role:Develop,sex:1,age:28,no1:028,no2:028,describe:},{id:10002,name:李四,role:研发,sex:0,age:36,no1:220,no2:220,describe:},{id:10003,name:王五,role:产品经理,sex:1,age:44,no1:003200,no2:003200,describe:},{id:10004,name:老六,role:Designer,sex:0,age:38,no1:02040,no2:02040,describe:}])constexportConfigreactive({asyncsheetMethod(params){const{worksheet}params worksheet.eachRow((excelRow,i){// 设置行高if(i2){excelRow.height80}})}})constsexCellRenderreactive({name:FormatSelect,options:[{label:女,value:0},{label:男,value:1}]})constdescribeExportMethod({row}){return自定义编号${row.no1}\n自定义职位${row.role}\n自定义年龄${row.age}}constexportEvent(){const$tabletableRef.valueif($table){$table.exportData({type:xlsx})}}/script配置说明export-method 属性作用覆盖列默认的导出数据逻辑。类型Function({ row, column, columnIndex }) string | number返回值导出的单元格内容字符串或数字。export-config 与 sheetMethod作用在导出时对 Excel 工作表进行高级定制例如设置行高、列宽、样式等。本例为所有数据行统一设置行高为 80使多行文本在 Excel 中完整显示。cell-render 与导出的关系使用 cell-render如示例中的 FormatSelect定义的列无需额外处理导出时会自动根据 options 映射为对应的标签文本。内容格式列宽与行高导出的 Excel 默认列宽可能无法完全显示多行文本建议在 sheetMethod 中设置合适的行高和列宽。换行符在导出文本中使用 \nExcel 会自动识别为单元格内的换行。https://vxetable.cn
