實(shí)現(xiàn)效果：
image.png
只需要給el-table添加row-key el-table-column添加:reserve-selection="true"
代碼如下：
<el-table :data="tableList" border class="table" ref="recordTable" header-cell-class-name="table-header"
:row-key="getRowKey" @selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
align="center"
>
</el-table-column>
</el-table>
表格上方需單獨(dú)加全選按鈕，可參考下面代碼。
<el-checkbox
:indeterminate="indeterminate"
@change="handleCheck"
label="所有商品"
v-model="allCheck">
</el-checkbox>
<el-table :data="tableList" border ref="recordTable"
:row-key="getRowKey" @select="handleSelectRow" @selection-change="handleSelectionChange"
@select-all="handleSelectAll">
<el-table-column
type="selection"
width="55"
:reserve-selection="true"
align="center"
>
</el-table-column>
</el-table>
js
data(){
return:{
multipleSelectionAll: [],//所有選中的數(shù)據(jù)包含跨頁數(shù)據(jù)
allCheck: false,
indeterminate: false,
tableList: [],//列表數(shù)據(jù)-請求得到或自定義
total: 0,//得到的列表總數(shù)
checkedList: [],//選中列表
uncheckedList: [],//未選中列表
}
},
watch: {
//監(jiān)聽列表,如果為所有全選,翻頁時保持狀態(tài)
tableList: {
handler(value) {
if (this.allCheck) {
if (this.uncheckedList.length === 0) {
this.$nextTick(() => {//這里一定要用$nextTick
value.forEach(row => {
this.$refs.recordTable.toggleRowSelection(row, true)
})
})
} else {
this.$nextTick(() => {
value.forEach(row => {
for (let i = 0; i < this.uncheckedList.length; i++) {
if (row.id === this.uncheckedList[i].id) {
this.$refs.recordTable.toggleRowSelection(row, false)
break
} else {
this.$refs.recordTable.toggleRowSelection(row, true)
}
}
})
})
}
}
},
deep: true
},
//監(jiān)聽未選中的數(shù)組
uncheckedList: {
handler(value) {
//1.未選中數(shù)組長度和總數(shù)相等,取消選中狀態(tài),取消樣式
if (value.length === this.total) {
this.allCheck = false
this.indeterminate = false
}
//2.未選中數(shù)組長度為0,取消樣式
if (value.length === 0) {
this.indeterminate = false
}
},
deep: true
},
//監(jiān)聽選中數(shù)組
checkedList: {
handler(value) {
//選中數(shù)組長度等于總數(shù),代表全部選中,取消樣式
if (value.length === this.total) {
this.allCheck = true
this.indeterminate = false
}
}
}
},
methods: {
getRowKey(row) {
return row.id;
},
handleSelectRow(rows, row) { //單行選擇
if (this.allCheck) {
// 多選框樣式改變,allCheck依然為true,為了保持翻頁狀態(tài)
this.indeterminate = true
// 判斷勾選數(shù)據(jù)行是選中還是取消
let selected = rows.length && rows.indexOf(row) !== -1
let lenFalse = this.uncheckedList.length
if (selected) {
// 選中,從未選中數(shù)組中去掉
if (lenFalse !== 0) {//
for (let i = 0; i < lenFalse; i++) {
if (this.uncheckedList[i].id === row.id) {
this.uncheckedList.splice(i, 1)
break
}
}
}
} else {
// 取消,當(dāng)前取消的行push進(jìn)去
this.uncheckedList.push(row)
}
} else {
this.checkedList = rows
}
},
handleSelectAll(rows) {
if (this.allCheck) {
this.indeterminate = true
let lenNow = this.tableList.length
// 判斷全選本頁,是選中還是取消
console.log(this.tableList[0]);
if (rows.indexOf(this.tableList[0]) !== -1) {
//如果選中所有rows存在于tableList,或者判斷rows長度不為0 證明是選中狀態(tài)
//uncheckedList要刪除當(dāng)前頁tableList
for (let i = 0; i < lenNow; i++) {
for (let n = 0; n < this.uncheckedList.length; n++) {
if (this.uncheckedList[n].id === this.tableList[i].id) {
this.uncheckedList.splice(n, 1)
}
}
}
} else {
// 取消 如果rows為空,當(dāng)頁是取消狀態(tài)
for (let j = 0; j < lenNow; j++) {
if (this.uncheckedList.length !== 0) {//如果uncheckedList已經(jīng)有值
if (this.uncheckedList.indexOf(this.tableList[j]) === -1) {
//就把uncheckedList中沒有的當(dāng)前頁tableList,push進(jìn)去
this.uncheckedList.push(this.tableList[j])
}
} else {//如果為空,直接全部push
this.uncheckedList.push(this.tableList[j])
}
}
}
} else {
this.checkedList = rows
}
},
handleCheck() {
if (this.indeterminate) {//當(dāng)不為全選樣式時,點(diǎn)擊變?yōu)槿x
this.allCheck = true
}
//只要點(diǎn)擊了全選所有,這兩個數(shù)組清空
this.uncheckedList = []
this.checkedList = []
if (this.allCheck) {//全選所有,列表全部選中,包括翻頁
this.tableList.forEach(row => {
this.$refs.recordTable.toggleRowSelection(row, true)
})
} else {//取消列表全選狀態(tài),包括翻頁
this.$refs.recordTable.clearSelection()
}
},
//選中數(shù)據(jù)
handleSelectionChange(val) {
//選中的數(shù)據(jù)獲取地方
this.multipleSelectionAll = val;
},
}
