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

【问题标题】：react-bootstrap-table2 how to handle large display in expanded rowreact-bootstrap-table2 如何处理扩展行中的大显示
【发布时间】：2018-10-22 22:49:20
【问题描述】：

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

当我有一个很大的商店列表（例如 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;
  }

【问题讨论】：

标签： scroll overflow expand react-bootstrap-table

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：