ant表格默认选项设置

原创

挥刀北上

修改于 2021-01-27 15:22:11

3.8K0

文章被收录于专栏：Node.js开发Node.js开发

今天在使用ant开发的时候有一个需求，需求是表格需要被选中：

如上图，点击表格的某一行，该行会处于选中状态，如何实现呢？

查看文档如下：

const {  Table, Button  } = antd;

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

class App extends React.Component {
  state = {
    selectedRowKeys: ['2'], // Check here to configure the default column
    loading: false,
  };

  start = () => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false,
      });
    }, 1000);
  };

  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        <div style={{ marginBottom: 16 }}>
          <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
            Reload
          </Button>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
          </span>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
      </div>
    );
  }
}

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

通过代码发现控制默认选项的配置在是Table的rowSelection这个配置参数，这个配置参数是一个对象，有许多可以配置的属性，这里需要使用的是selectedRowKeys和onChange属性，selectedRowKeys是一个数组，这个数组保存的是被选中的行的key值，这里使用时一定要注意，案例中的key值是number类型，所以selectedRowKeys数组中的选项也是number类型，不然默认选项的设置会失效。

onChange是当选项发生变化时触发的事件，这个函数有两个参数，selectedRowKeys和selectRows,我们需要前者来更新状态中的selectedRowKeys，这样就实现了表格默认选项。

如果想点击表格某一行，可以配置Table的onRow选项，他的值是函数：

可以看到onRow的值一个函数，函数返回一个对象，对象返回的是事件列表，上图只监听onCLick事件，在事件内部获得该行的key从而更新selectedRowKeys，单选框和复选框的更新方式不一样，单选简单直接更新，复选框需要筛选和判断从而，这里需要注意下，下面是官方示例：

<Table
  onRow={record => {
    return {
      onClick: event => {}, // 点击行
      onDoubleClick: event => {},
      onContextMenu: event => {},
      onMouseEnter: event => {}, // 鼠标移入行
      onMouseLeave: event => {},
    };
  }}
  onHeaderRow={column => {
    return {
      onClick: () => {}, // 点击表头行
    };
  }}
/>

在使用框架的过程中唯一的感悟就是如果想要开发迅速就的熟读文当，多做项目，从而达到手熟的目的，原理可以搁置一边，毕竟要先完成工作，要好要快要及时，熟练高效的完成工作才是目的。

以上便是在ant中配置表格默认选中行的使用方式，希望对你有所帮助。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

ant表格默认选项设置

ant表格默认选项设置

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐