需求
el-table組件，要么全部選擇可選擇的row，要么就全部取消，不可操作row
UI表現(xiàn)
row中的check-box置灰，但是可由js控制check-box的select
就是這個效果
實(shí)現(xiàn)
該功能可以自己實(shí)現(xiàn)，這里展示僅憑el-table組件來實(shí)現(xiàn)
- 置灰row的check-box，利用
selectable方法
function isSelectable() {
return false;
}
- 監(jiān)聽全選按鈕，利用
select-all -
select-all事件結(jié)束時(shí)，按照回調(diào)參數(shù)selections的內(nèi)容來做全選，這里全選采用的是toggleRowSelection方法，需要和table的數(shù)據(jù)源配合使用
function handleSelectAll(selection) {
// 防止selection響應(yīng)式變化引發(fā)的bug
const count = selection.length;
this.tabelData.forEach((data) => {
if (需要選中邏輯) {
this.$refs.table.toggleRowSelection(ticket, !count);
}
});
}
ps:toggleAllSelection該方法在selectable為false的情況下是無法選中row的
