I have created a mixin before that supports pagination, filtering and searching in Vue.js and it is well integrated with antd-vue's table and list.
To support checking all items in a table and list, I created another mixin. Here is the demo
But first of all, I would like to introduce the listing mixin first.
The listing mixin contains the following data, including the API where the data comes from, columns used to render the table, data retrieved from the API, and configs for pagination, sorting, filtering and searching.
The data was then fetched and updated via the following function, passing the config written in the listing to the API.
Therefore, to implement the check all function, I created another mixin called listingSelect, which contains the following data:
For checkboxes in antd-vue, we got two additional properties called checked and indeterminate, which will be true if the items were partially selected.
Here an edge case was handled if the total items retrieved was smaller than the page size.