Antd表格滚动 宽度自适应 不换行 (亲测可用 !!!)

方法一:

<Table
        className={styles.table}
        rowKey={(record) => record.key}
        columns={columns}
        dataSource={dataSource}
        scroll={{ x: 'max-content' }} // 加上这条  横向滚动  支持此属性的浏览器内容就不会换行了
        pagination={false}
      />
.table {
  :global {
    .ant-table-thead > tr > th {
      background: #fff !important;
      white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
    }
    .ant-table-tbody >tr> td {
      white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
    }
  }
}

方法二: (推荐使用)

<Table
 pagination={false}
  rowKey={record => record.key}
  dataSource={projectList}
  columns={this.columns.map(item => { // 通过配置 给每个单元格添加不换行属性
    const fun = () => ({ style: { whiteSpace: 'nowrap' } });
    item.onHeaderCell = fun;
    item.onCell = fun;
    return item;
  })}
  loading={getting}
  scroll={{ x: 'max-content' }}
  // onHeaderCell={() => ({ style: { whiteSpace: 'nowrap' } })} 
  // onCell={() => ({ style: { whiteSpace: 'nowrap' } })}
  // 文档里说可以这么写 但是我写了无效 不知道原因
/>

方法三:(不太推荐)

设置每个单元格的min-width, 不过我的项目中的内容是最好不要换行的

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现antd表格高度自适应,有几种方法可以尝试。首先,通过修改组件中的width属性为minWidth属性来解决表格不自适应宽度的问题。具体做法是在columns数组中的每个对象中将width属性改为minWidth属性,例如:{ title: '账户名', key: 'accountName', fixed: 'left', minWidth: 150 }。这样就可以确保表格宽度不会溢出容器。 其次,如果想要让分页部分的底边自适应屏幕高度,可以使用CSS选择器::v-deep和calc()函数来设置表格的高度。例如,使用以下CSS代码可以实现分页部分底边自适应屏幕高度的效果:.ant-table { height: calc(100vh - 170px); }。这样就可以确保表格的高度在不同屏幕大小下自适应。 另外,如果需要实现表格内容区域可以滚动的效果,可以使用以下CSS代码来设置表格的高度和滚动属性:.ant-table-scroll { height: calc(100vh - 170px); overflow: auto scroll; }。这样就可以在表格内容超出容器高度时显示滚动条。 此外,还可以通过监听窗口大小变化来动态修改表格的高度。可以在mounted钩子函数中添加window.onresize事件监听窗口大小的变化,并使用document.body.clientHeight来获取窗口的高度。然后根据这个值来修改表格的高度。具体做法可以参考以下代码: ```typescript // 在组件内部 public clientHeight = 0; // 监听视窗大小变化 mounted() { const that = this; window.onresize = () => { return (() => { that.clientHeight = document.body.clientHeight; // 可在这里进修改操作 // ... })(); }; } // Watch监听clientHeight属性,并在回调函数内部进修改操作 @Watch('clientHeight') private getHeight() { // 修改操作 // ... } ``` 通过上述方法,可以实现antd表格的高度自适应。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值