根据antd表中的数据默认选择表行

Posted 2023-02-22

【中文标题】根据antd表中的数据默认选择表行

【英文标题】：Select the table rows by default based on the data in antd table

【发布时间】：2019-12-26 21:55:27

【问题描述】：

我是 antd 的新手，我被困在我的项目中的一个地方。我想根据源数据或数据默认检查/选择行的复选框。

例如，如果我的数据源为

const data =
[ 

key: "1",
name: "John",
age: 22,
chosen: true,
working: null
,

key : "2",
name: "Jason",
age: 23,
chosen: false,
working: 'John'
]

所以基于数据源，如果任何对象选择键为真，我想默认检查/选择这些行的复选框。

我可以根据所选键的值是否为真过滤掉数据数组。但是如何默认选中复选框？ antd 表是否有任何道具，它将获取过滤数据的数组并检查/选择这些行的复选框？

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

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

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

const fiterSelectedRows = data.filter(row => 
        return row.chosen;
);

const rowSelection = 
        onChange: (selectedRowKeys, selectedRows) => 
            console.log(
                `selectedRowKeys: $selectedRowKeys`,
                "selectedRows: ",
                selectedRows
            );
        ,
        getCheckboxProps: record => 
            return 
                disabled: record.working != null,
                name: record.working
            ;
        
;

<Table rowSelection=rowSelection columns=columns dataSource=data/>

【问题讨论】：

Lo necesitaba, gracias

【参考方案1】：

通知selectedRowKeys: data.filter(item => item.chosen).map(item => item.key)。 selectedRowKeys包含item的所有key，这里所有key的item都会默认勾选。

您需要获取所有具有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>
    );
  

【讨论】：

this.selectRow(record) 在表的 onRow 属性中做了什么？

是的，该州将获得选择为真的所有数据。但如果选择为真，我希望默认选中复选框。我怎样才能做到这一点？我们将非常感谢您的帮助。

我把示例代码放在这里https://codesandbox.io/embed/priceless-ramanujan-dkygk。在第 65 行检查 selectedRowKeys: data.filter(item => item.chosen).map(item => item.key)。此容器中所有复选框的键都选择为 true。

是的，如果选择为 true，则代码可以正常工作，并且默认情况下会选择行。存在一个问题，如果选择为 false，我无法选中行的复选框，如果已选中，则取消选中该复选框。你有什么解决办法吗？

由于我使用 react 钩子来存储状态，因此我不得不对代码进行微小的更改并且它起作用了。非常感谢你帮助我 Tran，真的很有帮助。非常感谢:)

【参考方案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，它接受了一个数组。此外，一切都很简单——给这个道具赋值给我们的新数组。

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

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

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

我希望它可以帮助别人！ (～￣▽￣)～