ReactJS使用ExportCSV时如何在Bootstrap表为空时弹窗阻止下载空CSV

你可以通过覆写导出按钮的点击事件，在触发默认导出逻辑前先判断筛选后的数据是否为空，实现拦截效果，具体修改如下：

方案1：点击空数据时弹出告警拦截 #

核心逻辑是先获取筛选后的实时表格数据，点击导出时先做非空校验，无数据时直接阻止默认导出行为：

<ToolkitProvider
    bootstrap4
    keyField="TIMESTAMP,VALUE"
    data={tData}
    columns={columns}
    className="mt-4 col-md-2 col-offset-4"
    filter={filterFactory()}
    exportCSV={{
      fileName: "Details.csv",
      onlyExportFiltered: true,
    }}
  >
    {(props) => {
      // 获取筛选后的表格数据
      const filteredData = props.baseProps.data;
      // 自定义导出点击逻辑
      const handleExport = (e) => {
        if (filteredData.length === 0) {
          alert("当前无匹配数据，无法导出空文件");
          e.preventDefault();
          return;
        }
        // 数据非空时调用原生导出逻辑
        props.csvProps.onClick(e);
      }
      return (
        <React.Fragment>
          <BootstrapTable
            {...props.baseProps}
            pagination={pagination}
            filter={filterFactory()}
          />
          <ExportCSVButton className="btn btn-success" onClick={handleExport}>
            Export to CSV
          </ExportCSVButton>
        </React.Fragment>
      )
    }}
  </ToolkitProvider>

方案2：空数据时直接禁用导出按钮 #

如果不需要弹窗提示，也可以直接给按钮添加禁用状态，用户体验更直观：

{/* 其他代码保持不变，仅修改ExportCSVButton部分 */}
<ExportCSVButton 
  className="btn btn-success" 
  {...props.csvProps}
  disabled={props.baseProps.data.length === 0}
>
  Export to CSV
</ExportCSVButton>

注意：必须使用props.baseProps.data判断数据长度，而非原始的tData，才能正确匹配onlyExportFiltered开启后的筛选结果，避免原数据有数据、但筛选后为空的场景拦截失效。

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