rubanraj54 / vue-bootstrap4-table

Advanced table based on Vue 2 and Bootstrap 4 ⚡️
MIT License
220 stars 58 forks source link

Select and Deselect programmatically #82

Open Phil795 opened 4 years ago

Phil795 commented 4 years ago

A method for programmatically selecting and deselecting lines is missing.

If a line is selected and the data array changes, a line still remains selected even though it no longer exists.

It would be nice if you could implement 2 methods for this.

Kwaadpepper commented 4 years ago

This is needed because of pagination only selecting visible lines. Need to select all paginated content.

Kwaadpepper commented 4 years ago

Found a solution, This will work with pagination (local pagination)

You need to attribute a vbt_id manually (used on internal by vue-bootstrap4-table)

Select All

let i = 1, self = this;
_.map(self.rows, function(row) { // used underscore.js (just loop over rows, eg: for of)
    contact.vbt_id = i++;
    self.$refs.vueBootstrap4Table.addSelectedItem(row);
});
this.$refs.groupContacts.allRowsSelected = true; // hack to update main checkbox

Unselect All

let i = 1, self = this;
_.map(self.rows, function(row) { // used underscore.js (just loop over rows, eg: for of)
    contact.vbt_id = i++;
    self.$refs.vueBootstrap4Table.removeSelectedItem(row);
});
this.$refs.groupContacts.allRowsSelected = false; // hack to update main checkbox