Question

我是antd的新手，我被困在项目的某个地方。我想默认基于源数据或数据选中/选中行的复选框。

例如，如果我的数据源为

const data =
[ 
{
key: "1",
name: "John",
age: 22,
chosen: true,
working: null
},
{
key : "2",
name: "Jason",
age: 23,
chosen: false,
working: 'John'
}]

因此，基于数据源，如果有任何对象将键选为true，则我想默认情况下选中/选中这些行的复选框。

我可以根据所选键的值为true与否来过滤出数据数组。但是默认情况下如何选中该复选框？ antd表是否有任何支持，它会获取已过滤数据的数组并选中/选中这些行的复选框？

我尝试使用getCheckboxProps中的checked属性检查行，但是当我在控制台中使用该属性时，我收到一条警告，提示“警告：[antd：Table]不要在{中设置checked或defaultChecked {1}}。请改用getCheckboxProps。“

下面是我当前正在使用的代码。

selectedRowKeys

Answer 1

通知selectedRowKeys: data.filter(item => item.chosen).map(item => item.key)。 selectedRowKeys包含项的所有键，默认情况下将选中此处所有具有键的项。

您需要获取所有具有chosen为真的项目。

data.filter(item => item.chosen)
// [{key: '1', name: 'John Brown', ...},
//  {key: '3', name: 'Joe Black', ...},
//  {key: '4', name: 'Joe Black', ...}]
// all items have chosen is true

然后获取该数组的所有键。

data.filter(item => item.chosen).map(item => item.key)
// ['1', '2', '3']
// all keys of items have chosen is true

示例代码：

数据

const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  chosen: true,
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  chosen: false,
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  chosen: true,
  address: 'Sidney No. 1 Lake Park',
}, {
  key: '4',
  name: 'Disabled User',
  age: 99,
  chosen: true,
  address: 'Sidney No. 1 Lake Park',
}];

数据表

class App extends React.Component {
  state = {
    selectedRowKeys: data.filter(item => item.chosen).map(item => item.key), // 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>
    );
  }
}

Answer 2

上面的作者说的都是对的，我决定分享我的经验。我有一个没有键字段的对象数组（你好后端）。最初，我通过条件（取决于您的任务）过滤了这个数组，例如，coin_symbol 字段 === "WBNB"。过滤后，我立即使用 map 创建一个新数组。不要忘记制作本地状态。

const [selectedRowKeys, setSelectedRowKeys] = useState()
setSelectedRowKeys(dashboardData?.filter(i => i.coin_symbol === 'WBNB').map(i => i.id))

然后，在table props 中挖掘之后，我看到了一个props defaultSelectedRowKeys，它接受一个数组。此外，一切都很简单 - 给这个 props 赋值给我们的新数组。

const rowSelection = { defaultSelectedRowKeys: selectedRowKeys, ...otherProps (like onChange, getCheckboxProps, etc.)

另一件重要的事情 - 如果像我一样，来自服务器的数据很长，最好不要渲染表格，而是，例如，某种加载文本或滑块。

selectedRowKeys ? <YourTable dataSource={yourData} rowSelection={rowSelection}/> : <Loader/>

希望对大家有所帮助！ (～￣▽￣)～

默认情况下，根据antd表中的数据选择表行

2 个答案: