关于ant design table加scroll属性后列跟表头不对齐

6 篇文章 0 订阅
class Home extends React.Component {
  render() {
    const dataSource = [{
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号'
    }, {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号'
    }];
    
    const columns = [{
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    }, {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    }];
    
    
    return (
     <div>
        <div>Home</div>
        <Table dataSource={dataSource} columns={columns}/>
     </div>
    );
  }
}

Table里没加scroll属性之前,是能对齐的,如下图

当在Table里加了scroll属性之后

<Table dataSource={dataSource} columns={columns} scroll={{y:600}}/>

变成了这样,错开了

这个时候,在columns里,每一项都添加一个width属性,而且这个属性的值最好是百分比

const columns = [{
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width:'33%'
    }, {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width:'33%'
    }, {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
      width:'33%'
    }];

这样,表格就正常显示了

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,我之前的回答有误。Ant Design Mobile InfiniteScroll 组件的正确属性应该是 `loadMore` 而非 `onLoadMore`。 `loadMore` 是 InfiniteScroll 组件的一个回调函数,当滚动到底部时会自动触发该函数。该函数需要返回一个 Promise 对象,在 Promise 对象可以进行异步载数据的操作,并在载完成后通过 Promise 的 resolve 方法通知 InfiniteScroll 组件载完成,使得 InfiniteScroll 组件能够继续监听滚动事件。 下面是一个示例代码,演示了如何使用 `loadMore` 属性载更多数据: ```jsx import { InfiniteScroll } from 'antd-mobile'; class MyComponent extends React.Component { state = { list: [], // 列表数据 hasMore: true, // 是否还有更多数据 }; // 载更多数据的回调函数 loadMore = () => { // 判断是否还有更多数据需要载 if (!this.state.hasMore) { return; } // 载数据 fetchData().then(data => { // 将新数据合并到原有数据 const list = this.state.list.concat(data); // 更新组件状态 this.setState({ list: list, hasMore: data.length > 0, }); // 完成载,通知 InfiniteScroll 组件 return Promise.resolve(); }); }; render() { return ( <InfiniteScroll style={{ height: 'calc(100vh - 45px)', overflow: 'auto' }} loadMore={this.loadMore} hasMore={this.state.hasMore} > {this.state.list.map(item => ( <div key={item.id}>{item.name}</div> ))} </InfiniteScroll> ); } } ``` 在上面的代码,`loadMore` 函数通过调用 `fetchData` 函数异步载数据,并将新数据合并到原有数据载完成后,根据新数据的长度判断是否还有更多数据需要载,然后通过 Promise 的 resolve 方法通知 InfiniteScroll 组件载完成。 同时,还需要注意在组件状态设置一个 `hasMore` 属性,用来控制是否还有更多数据需要载。在 `loadMore` 函数判断 `hasMore` 属性,如果为 `false`,则不会触发载更多数据的操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值