react antd 表格固定高度

发布时间 2023-11-23 17:33:06作者: 最好的年纪
<div className="ad-body">
  <Table
    className="area-drawing-table"
    rowClassName={(record, index) =>
      index === selectIndex ? 'ant-table-row-selected' : ''
    }
    rowKey={record => record.key}
    columns={areaDrawingColumns}
    dataSource={detailDt?.areaList || []}
    pagination={false}
    scroll={{ y: '100%' }}
  />
</div>;

// 固定高度设置
.ad-body {
  width: 100%;
  height: 240px;

  // 高度
  .ant-table-wrapper {
    height: 100%;
    .ant-spin-container {
      height: 100%;
      .ant-table-body {
        height: calc(100% - 44px) !important;
        .ant-empty {
          padding-top: 52px;
        }
      }
    }
  }

  // // th td设置
  // .area-drawing-table {
  //   border: 1px solid rgba(0, 0, 0, 0.1);
  //   border-top: transparent;
  //   tr {
  //     th {
  //       padding: 8px 16px;
  //     }
  //     td {
  //       padding: 3px 16px;
  //     }
  //   }
  // }
}