Vue+BTable分页场景下导出全量客户数据问题求助

一、后端Laravel代码修改 #

在现有接口中增加导出判断逻辑，当请求携带export参数时返回全量数据，否则保持分页返回：

public function index(Request $request)
{
    $search = $request->search;
    $query = DB::table('customers')
                ->when(!empty($search), function ($query) use ($search) {
                    return $query->where('first_name', 'like', '%'.$search.'%')
                                ->orwhere('last_name','like', '%'.$search.'%')
                                ->orwhereRaw("concat(first_name, ' ', last_name) like '%".$search."%' ");
                });

    // 导出请求：返回全量数据
    if ($request->has('export')) {
        return $query->get();
    }

    // 正常分页请求
    return $query->paginate(50);
}

二、前端Vue代码修改 #

修改exportFile方法，专门请求全量数据（携带当前搜索条件）后再执行导出，替换原有的仅导出当前页逻辑：

1. 基础修改版本 #

exportFile: async function () {
    try {
        // 请求全量客户数据，带上当前搜索关键词
        const allCustomers = await this.$axios.$get(`/api/admin/customers?search=${this.search}&export=true`);
        
        const schema = [
            {
                column: 'ID',
                type: Number,
                value: customer => customer.id
            },
            {
                column: '名字',
                type: String,
                value: customer => customer.first_name
            },
            {
                column: '姓氏',
                type: String,
                value: customer => customer.last_name
            },
            {
                column: '邮箱',
                type: String,
                value: customer => customer.email
            },
            {
                column: '手机号',
                type: String,
                value: customer => customer.phone_number
            },
        ];

        await writeXlsxFile(allCustomers, {
            schema,
            fileName: '全部客户数据.xlsx'
        });
    } catch (error) {
        this.$toast.error('导出数据失败');
    }
}

2. 优化版本（增加导出状态提示） #

如果数据量较大，建议添加加载状态避免重复点击：

• 在data中添加状态变量：

data() {
    return {
        // ... 原有数据
        isExporting: false
    }
}

• 修改按钮和导出方法：

<!-- 导出按钮修改 -->
<button type="submit" class="btn btn-primary" @click="exportFile" :disabled="isExporting">
    {{ isExporting ? '导出中...' : '导出' }}
</button>

exportFile: async function () {
    this.isExporting = true;
    try {
        const allCustomers = await this.$axios.$get(`/api/admin/customers?search=${this.search}&export=true`);
        
        const schema = [
            {
                column: 'ID',
                type: Number,
                value: customer => customer.id
            },
            {
                column: '名字',
                type: String,
                value: customer => customer.first_name
            },
            {
                column: '姓氏',
                type: String,
                value: customer => customer.last_name
            },
            {
                column: '邮箱',
                type: String,
                value: customer => customer.email
            },
            {
                column: '手机号',
                type: String,
                value: customer => customer.phone_number
            },
        ];

        await writeXlsxFile(allCustomers, {
            schema,
            fileName: '全部客户数据.xlsx'
        });
    } catch (error) {
        this.$toast.error('导出数据失败');
    } finally {
        this.isExporting = false;
    }
}

三、额外说明 #

如果数据量极大（比如数万条以上），前端直接处理全量数据可能出现内存溢出或卡顿，此时建议后端生成Excel文件并返回下载链接，前端直接跳转下载该链接，性能更稳定。

内容的提问来源于stack exchange，提问作者Coder