关于vxe-table v4 导出大数据量excel浏览器卡死问题的解决

开始以为是第三方插件的问题,问了ai,分析不是,是因为数据太多,前端DOM崩了,解决方法很简单,开启虚拟滚动即可.

然而事情也并没有这么简单,改了之后,可以导出了,但某列使用 template插槽渲染的值,只有第一条显示出来了,比如性别列:"男",后面的都只会显示原始值,比如 "1".

最后确认是虚拟滚动导致的,需要使用:formatter转,而且之前插槽不需要删,网页显示用插槽,导出使用formatter

代码如下:

<vxe-table
                    ref="tableRef"
                    :cell-config="{height: 60}"
                    :data="data.dataList"
                    :export-config="exportConfig"
                    :loading="data.loading"
                    :loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在加载中...' }"
                    :row-config="{ isHover: true }"
                    :sort-config="sortConfig"
                    :virtual-y-config="{ enabled: true, gt: 0 }"
                    border
                    class="mytable-style"
                    header-align="center"
                    height="80%"
                    max-height="90%"
                    min-height="100"
                    show-header-overflow
                    show-overflow
                    @sort-change="sortChangeEvent">
                    >
                    <vxe-colgroup field="group0" title="汽运取样汇总报表">
                        <vxe-column align="center" field="seq" type="seq" width="80">
                            <template #footer="{ row,rowIndex }">
                                <span v-if="rowIndex === 0" style="color: red;">{{ row.seq }}</span>
                                <span v-else>{{ row.seq }}</span>
                            </template>
                        </vxe-column>

                        <vxe-column align="center" field="carNo" min-width="120" title="车号"/>
                        <vxe-column align="center" field="matchid" min-width="120" title="物流号"/>
                        <vxe-column align="center" field="backup1" min-width="120" title="采购单号"/>
                        <vxe-column align="center" field="samplerName" min-width="120" title="取样机名称"/>


                        <vxe-column :formatter="({ cellValue }) => carSampleStatus.find(item => item.value == cellValue)?.label || cellValue" align="center" field="sampleStatus" min-width="100" sortable
                                    title="取样状态">
                            <template #default="{ row }">
                                <dict-tag :options="carSampleStatus" :value="row.sampleStatus"/>
                            </template>
                        </vxe-column>
                        <vxe-column align="center" field="sampleCount" min-width="150" title="取样次数"/>
                        <vxe-colgroup field="photo" title="照片">
                            <vxe-column :cell-render="imgUrlCellRender" align="center" field="photoList[0]"
                                        title="1" width="60"
                            >
                            </vxe-column>
                            <vxe-column :cell-render="imgUrlCellRender" align="center" field="photoList[1]"
                                        title="2" width="60"
                            >
                            </vxe-column>
                            <vxe-column :cell-render="imgUrlCellRender" align="center" field="photoList[2]"
                                        title="3" width="60"
                            >
                            </vxe-column>
                        </vxe-colgroup>

                        <vxe-column align="center" field="samplerStart" min-width="150" title="取样开始时间"/>
                        <vxe-column align="center" field="samplerStop" min-width="150" title="取样结束时间"/>

                        <vxe-column align="center" field="materialCode" min-width="120" title="物料编码"/>
                        <vxe-column align="center" field="materialName" min-width="120" title="物料名称"/>
                        <vxe-column align="center" field="supplier" min-width="120" title="供应商"/>
                        <vxe-column align="center" field="planid" min-width="120" title="计划号"/>

                        <vxe-column align="center" field="samplePersonName" min-width="120" title="取样人姓名"/>


                    </vxe-colgroup>
                </vxe-table>

:virtual-y-config="{ enabled: true, gt: 0 }"开启虚拟列