Question

我有一个bootstrap-table，它有多个标头和push()函数，addAction()表格中来自我API的信息。一切正常，除非我没有信息要推，我的桌子非常小，看起来并不是很美观。

默认情况下，Bootstrap-table将表大小设置得非常小，并在表中写入没有要显示的数据。我想用一个内部空的默认表大小值替换它。

我在哪里制作标题并致电return ( <div onLoad={addAction(pageSize, this.props.data.viewer)}> <BootstrapTable hover data={action} headerStyle={{ background: '#DEDEDE' }}> <TableHeaderColumn dataField='process' width='200px'> <p> Process </p> </TableHeaderColumn> </BootstrapTable> </div> );

function addAction (quantity, props) {
  action = [];
   for (let i = 0; i < quantity; i++) {
    if (props.actions.items[i] != null) {
      action.push({
       process: props.actions.items[i].request.process.description,
      });
    }
   }
}

addAction（）

{{1}}

总结一下，如果props.actions没有项目，我想显示一个固定大小的空网格。

是否可能，如果可能，怎么样？

由于

Answer 1

react-bootstrap-table的属性很少，可以用来设置表格的高度：

1。设置表格的高度：reference

<BootstrapTable data={ data } height='120px'>

2. 设置标题的高度：reference

<BootstrapTable
  headerStyle={{ height: 200px }}>
    //...
</BootstrapTable>

3. 设置表格正文的高度：reference

<BootstrapTable
  bodyStyle={{ height: '200px' }}>
    //...
</BootstrapTable>

Answer 2

将您的逻辑放入其他部分。当prop.actions.item不为null时，如果section将运行。但是当它为null时，else部分将运行。在那里你可以把你的逻辑用于给出消息或者用空格式化空白。

 if (props.actions.items[i] != null) {
          action.push({
           process: props.actions.items[i].request.process.description,
          });
    else
    {
    do some thing here
    }

Answer 3

bootstrap表可以占用父元素的整个区域。

当数据未到来时，在表中创建一个td并使用colspan。之后放入并清空字符串。那么尺寸就可以了。＆安培; NBSP

默认的Bootstrap表大小

3 个答案: