Question

我有一个带有一些列的表，用于显示产品及其价格。在我的主表上，一行由产品名称以及其他公司商店的最低和最高价格组成。当我单击一行时，将其展开以显示有关该产品的一些详细信息。在我的情况下，另一张表格中有该公司每个商店的列以及该特定商店的价格。

当我有很多商店时（例如50个），该行可以扩展并正确显示结果，但其大小超过了屏幕宽度，并且初始表的大小也随之增加。结果，我的最小/最大丢失在屏幕右侧，并且我只能滚动整个页面才能查看数据。

无论如何，是否有控制溢出的功能，并为第二个表（展开中的一个表）提供了水平滚动条，这样它才不会脱离其容器？

我看到了这篇文章，但无法使它起作用：https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/291

这是展开前后的行。

扩展行代码：

    const expandRow = {
          renderer: row => {
            var columns = vm.generateColumns();
            var product_list = vm.state.products_by_ean[row.ean_code];
            var content = {};

            product_list.forEach(product => {
              vm.props.selected_locations.forEach(shop_id => {
                if (product["shop"] == shop_id) {
                  content["shop_" + shop_id] =
                    product.price_without_taxes_normalized;
                } else {
                  if (!content.hasOwnProperty(shop_id)) {
                    content[shop_id] = {};
                  }
                }
              });
            });

            if (columns.length > 0) {
              return (
                <ToolkitProvider columns={columns} data={[content]} keyField="id">
                  {props => (
                    <div>
                      <BootstrapTable
                        {...props.baseProps}
                        noDataIndication={() => <NoDataIndication />}
                      />
                    </div>
                  )}
                </ToolkitProvider>
              );
            } else {
              return "";
            }
          },
          expanded: []
        };

  generateColumns() {
    let columns = [];
    let shop_list = this.getShopList();

    if (shop_list.length > 0) {
      shop_list.forEach(shop => {
        let col = {
          dataField: "shop_" + shop.id,
          formatter: priceFormatter,
          style: {
            whiteSpace: "normal"
          },
          text: shop.actor.label + " - " + shop.name
        };
        columns.push(col);
      });
    }

    return columns;
  }

Answer 1

为将扩展行的整个数据放入其中的容器提供一个类。

示例：-

const expandRow = {
    renderer: row => {
        var columns = vm.generateColumns();
        var product_list = vm.state.products_by_ean[row.ean_code];
        var content = {};
        .........
        <div className="expanded-container">
            <BootstrapTable
                {...props.baseProps}
                noDataIndication={() => <NoDataIndication />}
            />
        </div>

CSS:-
.expanded-container{
    max-height: 10rem;
    overflow: scroll;
}

Answer 2

谢谢您的帮助，我以为会有一个容器包装器，但是我找不到任何信息。

使用自定义包装程序效果很好：

.expanded-container{
    width: 97vw;
    overflow-x: scroll;
    white-space: nowrap;
}

react-bootstrap-table2如何处理扩展行中的大显示

2 个答案: