Antd-table full selection stepping on the pit record

Table of contents

1. Demand

Two, the problem

​Edit three, solve

4. Select all to select all data instead of the current page


1. Demand

        I recently encountered a small requirement. In our project, there is a table that needs to add the function of selecting all and deleting. Isn't it easy? So I found andt's official website, clicked the cv, and quickly added this function. I started self-testing with confidence, but found some problems.

Two, the problem

        1. Click Select All, only all the options on the current page will be selected, and the next few pages will also be selected, but the selection array does not include the options on the second page, and the options on the second page will still be selected superior.          Here the length of the array is only 10, but the page displays all options.

        2. Select the first item on the first page, and the first items on all subsequent pages will be checked.

         3. The obtained array is the index subscript of the corresponding data, and there is no way to distinguish the data.

Three, solve

        In fact, there is only one problem, that is, there is no corresponding identification  rowKey   . The lack of this thing has led to problems including but not limited to the above.

           I still haven't read the documentation carefully. With this setting, all the problems are solved.

Note that record.xx          here    is the attribute value of a certain attribute of the corresponding row. After setting here, the content of the obtained array is the corresponding attribute value.

         See here has changed from index subscript to ID. So far, the above three problems have been correspondingly resolved.

4. Select all to select all data instead of the current page

        The select all in the andt-table component is only for the current page, if you want to select all data, you need to add a method.

  You can add the rowkey values ​​of all data to the array         by judging  selected to achieve the goal.

Guess you like

Origin blog.csdn.net/qq_45799465/article/details/128948247