开始以为是第三方插件的问题,问了ai,分析不是,是因为数据太多,前端DOM崩了,解决方法很简单,开启虚拟滚动即可.
然而事情也并没有这么简单,改了之后,可以导出了,但某列使用 template插槽渲染的值,只有第一条显示出来了,比如性别列:"男",后面的都只会显示原始值,比如 "1".
最后确认是虚拟滚动导致的,需要使用:formatter转,而且之前插槽不需要删,网页显示用插槽,导出使用formatter
代码如下:
1 <vxe-table 2 ref="tableRef" 3 :cell-config="{height: 60}" 4 :data="data.dataList" 5 :export-config="exportConfig" 6 :loading="data.loading" 7 :loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在加载中...' }" 8 :row-config="{ isHover: true }" 9 :sort-config="sortConfig" 10 :virtual-y-config="{ enabled: true, gt: 0 }" 11 border 12 class="mytable-style" 13 header-align="center" 14 height="80%" 15 max-height="90%" 16 min-height="100" 17 show-header-overflow 18 show-overflow 19 @sort-change="sortChangeEvent"> 20 > 21 <vxe-colgroup field="group0" title="汽运取样汇总报表"> 22 <vxe-column align="center" field="seq" type="seq" width="80"> 23 <template #footer="{ row,rowIndex }"> 24 <span v-if="rowIndex === 0" style="color: red;">{{ row.seq }}</span> 25 <span v-else>{{ row.seq }}</span> 26 </template> 27 </vxe-column> 28 29 <vxe-column align="center" field="carNo" min-width="120" title="车号"/> 30 <vxe-column align="center" field="matchid" min-width="120" title="物流号"/> 31 <vxe-column align="center" field="backup1" min-width="120" title="采购单号"/> 32 <vxe-column align="center" field="samplerName" min-width="120" title="取样机名称"/> 33 34 35 <vxe-column :formatter="({ cellValue }) => carSampleStatus.find(item => item.value == cellValue)?.label || cellValue" align="center" field="sampleStatus" min-width="100" sortable 36 title="取样状态"> 37 <template #default="{ row }"> 38 <dict-tag :options="carSampleStatus" :value="row.sampleStatus"/> 39 </template> 40 </vxe-column> 41 <vxe-column align="center" field="sampleCount" min-width="150" title="取样次数"/> 42 <vxe-colgroup field="photo" title="照片"> 43 <vxe-column :cell-render="imgUrlCellRender" align="center" field="photoList[0]" 44 title="1" width="60" 45 > 46 </vxe-column> 47 <vxe-column :cell-render="imgUrlCellRender" align="center" field="photoList[1]" 48 title="2" width="60" 49 > 50 </vxe-column> 51 <vxe-column :cell-render="imgUrlCellRender" align="center" field="photoList[2]" 52 title="3" width="60" 53 > 54 </vxe-column> 55 </vxe-colgroup> 56 57 <vxe-column align="center" field="samplerStart" min-width="150" title="取样开始时间"/> 58 <vxe-column align="center" field="samplerStop" min-width="150" title="取样结束时间"/> 59 60 <vxe-column align="center" field="materialCode" min-width="120" title="物料编码"/> 61 <vxe-column align="center" field="materialName" min-width="120" title="物料名称"/> 62 <vxe-column align="center" field="supplier" min-width="120" title="供应商"/> 63 <vxe-column align="center" field="planid" min-width="120" title="计划号"/> 64 65 <vxe-column align="center" field="samplePersonName" min-width="120" title="取样人姓名"/> 66 67 68 </vxe-colgroup> 69 </vxe-table>
:virtual-y-config="{ enabled: true, gt: 0 }"开启虚拟列
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。