关于antd表格问题 Table

Question

项目上用到了antd中的Table，数据较多时想要弄成滚动，添加scroll这方法时，发现table中的样式自动错乱了，有什么办法能解决呢

用官网demo试了下，样式也是错乱的

const { Table, Button } = antd;
const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
}, {
  key: '4',
  name: 'Jim Red',
  age: 32,
  address: 'London No. 2 Lake Park',
}];

class App extends React.Component {
  state = {
    filteredInfo: null,
    sortedInfo: null,
  };
  handleChange = (pagination, filters, sorter) => {
    console.log('Various parameters', pagination, filters, sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter,
    });
  }
  render() {
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      filters: [
        { text: 'Joe', value: 'Joe' },
        { text: 'Jim', value: 'Jim' },
      ],
      filteredValue: filteredInfo.name || null,
      onFilter: (value, record) => record.name.includes(value),
      sorter: (a, b) => a.name.length - b.name.length,
      sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
    }, {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a, b) => a.age - b.age,
      sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
    }, {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      filters: [
        { text: 'London', value: 'London' },
        { text: 'New York', value: 'New York' },
      ],
      filteredValue: filteredInfo.address || null,
      onFilter: (value, record) => record.address.includes(value),
      sorter: (a, b) => a.address.length - b.address.length,
      sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
    }];
    return (
      <div>
        <Table scroll={{ x: true, y: 100 }} columns={columns} dataSource={data} onChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

没加滚动方法table是正常的

添加滚动方法后，发现样式错乱
scroll={{ x: true, y: 100 }}

Answer 1

官网上说的，要指定列的宽度哦

Answer 2

给每一列指定宽度可以解决这个问题

Answer 3

解决这个问题的方式就是设备每一列的宽度，并将scroll.x的设置为所有这些列宽的总和，但是这样有一个问题，这你的屏幕宽度足够大时，会出现多出来的列，给表格加上边框能很明显的看到问题，如果想达成任意屏宽时都没有问题，这时候就要把非固定的任一一列限定的width去掉，其它的都不改动，让这一列去自适应分配，就所有问题都没有了，希望帮到大家

Answer 4

你好，你的问题解决了吗？我也遇到了这个问题