1.HTLM 添加按鈕全選禀挫，要有一個全選標識狀態(tài)
<el-button
type="success"
@click="selectAll"
>
{{ sign === 1 ? '全 選' : '取 消 全 選' }}
</el-button>
Table
<el-table
v-loading="loading"
ref="accessControlTable"
:data="tableData"
:max-height="tableHeight"
:span-method="arraySpanMethod"
header-cell-class-name="custom-table"
@selection-change="handleSelectionChange"
@select="selectExceptCardIds"
@select-all="selecetAll"
>
<el-table-column
type="selection"
width="30"
/>
<el-table-column
prop="id"
type="index"
align="center"
width="50"
label="序號"/>
...
</el-table>
2.JS相關代碼如下：
// 數據
data() {
return {
tableData: [],
sign: 1, // 是否點擊全選,1未點擊全選萝风，2，點擊全選
checkedArr: [], // 勾選的行數組
uncheckedArr: [], // 取消勾選的行數組
}
表格數據獲取接口返回值要做如下操作
// 切換分頁及分頁條數全選
this.sign === 2 && this.chooseAllPages()
this.sign === 1 && this.checkedSelected()
相關操作方法如下：
// 選中事件
handleSelectionChange(val) {
console.log('多選id===handleSelectionChange', val)
},
// 合并表格最后三列
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 6) {
return [0, 0]
} else if (columnIndex === 5) {
return [1, 2]
}
},
// 全選切換
selectAll() {
this.sign = this.sign === 1 ? 2 : 1
console.log('sign', this.sign)
this.chooseAllPages()
this.checkedArr = []
this.uncheckedArr = []
},
// 全選所有頁面
chooseAllPages() {
if (this.sign === 2) {
// 全選
this.$nextTick(() => {
this.tableData.forEach(row => {
// 沒有取消過的勾選
if (this.uncheckedArr.map(v => v.id).indexOf(row.id) < 0) {
this.$refs.accessControlTable.toggleRowSelection(row, true)
}
})
})
} else {
// 取消全選
this.$nextTick(() => {
this.$refs.accessControlTable.clearSelection()
})
}
},
// 切換分頁時選擇之前選中
checkedSelected() {
console.log('切換分頁時選擇之前選中')
this.$nextTick(() => {
if (this.checkedArr.length === 0) return
this.tableData.forEach(row => {
if (this.checkedArr.map(v => v.id).indexOf(row.id) >= 0) {
this.$refs.accessControlTable.toggleRowSelection(row, true)
}
})
})
},
// 全選后取消單個選擇事件,當用戶手動勾選數據行的 Checkbox 時觸發(fā)的事件
selectExceptCardIds(selection, row) {
// selection 當前頁面所有選中的項
// row 當前點擊操作的項
console.log('全選后取消單個選擇事件,當用戶手動勾選數據行的 Checkbox 時觸發(fā)的事件', selection, row)
// 所有頁面不全選
if (this.sign === 1) {
if (selection.indexOf(row) >= 0) {
// 新增（勾選上）
selection.map(el => {
if (this.checkedArr.map(v => v.id).indexOf(el.id) === -1) {
this.checkedArr.push(el)
}
})
console.log('所有選中的', this.checkedArr)
} else {
// 取消勾選
this.checkedArr.map((el2, index) => {
if (el2.id === row.id) {
this.checkedArr.splice(index, 1)
}
})
console.log('刪除后選中的', this.checkedArr)
}
} else {
// 所有頁面全選
if (selection.indexOf(row) >= 0) {
// 重新勾選上
this.uncheckedArr.map((el, index) => {
if (el.id === row.id) {
this.uncheckedArr.splice(index, 1)
}
})
} else {
// 取消勾選
this.uncheckedArr.push(row)
}
console.log('剔除的id集合', this.uncheckedArr)
}
},
// 當前頁面全選
selecetAll(selection) {
console.log('當前頁面全選', selection)
if (this.sign === 1) {
// 不是全選按鈕狀態(tài)下-考慮選中哪些
if (selection.length > 0) {
// 選中
selection.map(row => {
if (this.checkedArr.map(v => v.id).indexOf(row.id) < 0) {
this.checkedArr.push(row)
}
})
} else {
// 取消選中
this.tableData.map(row => {
this.checkedArr.map((el2, index) => {
if (el2.id === row.id) {
this.checkedArr.splice(index, 1)
}
})
})
}
console.log('不是全選按鈕狀態(tài)下-考慮選中哪些', this.checkedArr)
} else {
// 全選按鈕狀態(tài)下-考慮不選中哪里
if (selection.length === 0) {
this.tableData.map(row => {
this.uncheckedArr.push(row)
})
} else {
selection.map(row => {
this.uncheckedArr.map((el, index) => {
if (el.id === row.id) {
this.uncheckedArr.splice(index, 1)
}
})
})
}
console.log('全選按鈕狀態(tài)下-考慮不選中哪里', this.uncheckedArr)
}
},
備注：其中id是每條記錄的唯一標識，當全選按鈕點擊后刻帚，按鈕變成取消全選拜效，切換標識sign的值抵怎，接口傳參帶入全選標識和剔除行id數組uncheckedArr，若是默認狀態(tài)非全選玫坛，則帶入非全選標識和選中行id數組checkedArr结笨。
