vue中table實現(xiàn)真正的跨越全選
更新時間：2023年05月09日 11:12:20 作者：Winter_Bear
本文主要介紹了vue中table實現(xiàn)真正的跨越全選，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、項目需求
1.最初產(chǎn)生
運營測試時，提出跨頁全選的要求；感官上在頁面中只要勾選上方的復(fù)選框，那么就要勾選所有的數(shù)據(jù)。需求大致描述如下：
2.實現(xiàn)思路：
2.1 翻找element-ui框架文檔及網(wǎng)上的實現(xiàn)方式：全選勾選的本頁的數(shù)據(jù)，只有翻頁時才會勾選下一頁的數(shù)據(jù)；當(dāng)翻到非首頁，勾選全選按鈕，得到的效果也不會選中前面頁面的數(shù)據(jù)等等。
2.2 框架本身的限制，全選并不會拿到所有的數(shù)據(jù)，另外考慮到數(shù)據(jù)過多的情況，前端傳遞所有選中id不太現(xiàn)實；那么就實現(xiàn)感官上的全選，只要點擊全選，頁面效果是【全勾選所有】數(shù)據(jù)。
二、代碼實現(xiàn)
第一步：去除項目本身的全選按鈕，添加屬于自己的【全選】按鈕
<template>
<div class="change-table">
<el-checkbox
:class="allChangeFlag ? 'change-nocheckbox' : 'change-checkbox'"
v-model="checkChangeAll"
@change="handleCheckAllChange"
:disabled="!tableData.length"
></el-checkbox>
<el-table
border
ref="tableData"
:data="tableData"
style="width: 100%"
max-height="750"
:row-key="getRowKeys"
@select="changeSelect"
@select-all="changeSelectAll"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
:reserve-selection="true"
width="55"
align="center"
></el-table-column>
<el-table-column
type="index"
:index="
(index) => indexrank(index, this.pageNum, this.pageCount)
"
label="序號"
width="55"
></el-table-column>
<el-table-column
label="操作"
fixed="right"
width="140"
align="left"
>
<template v-slot="scope">
<el-button
type="text"
class="operat-btn"
@click="getDetail(scope.row)"
>
查看詳情
</el-button>
<el-button
v-if="scope.row.back_flag"
type="text"
class="operat-btn"
@click="openDialog('recall', scope.row, scope.$index)"
>
撤回
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<page
:total="totalNum"
:page="pageNum"
:size="pageCount"
:Slzes="[5, 10, 20, 50]"
@handlePageSizeChange="handleChange"
></page>
</div>
</div>
</template>第二步：隱藏el-table的全選按鈕，定位自定義el-checkbox
// 樣式代碼
<style>
.change-table {
position: relative;
}
.change-checkbox {
position: absolute;
left: 21px;
top: 20px;
z-index: 10;
}
.change-checkbox >>> .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background: #fff;
border-color: #dcdfe6;
}
.change-nocheckbox {
position: absolute;
left: 21px;
top: 21px;
z-index: 10;
}
.change-nocheckbox >>> .el-checkbox__inner::after {
border: none;
}
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
display: none;
}
</style>第三步：監(jiān)聽數(shù)據(jù)，配合UI庫規(guī)定方法或?qū)傩?，實現(xiàn)感官全選
<script>
export default {
data() {
return {
tableData:[],
allChangeFlag: false, // 是否勾選自定義全選按鈕
checkChangeAll: false, // 自定義全選標(biāo)識
unmultipleSelection: [], // 未選中數(shù)據(jù)數(shù)組
enterUnCheckedPk: [], // 選中數(shù)據(jù)pk數(shù)組
isTableAll: false, // table組件有無點擊全選按鈕標(biāo)識
checkVal: [], // 選中數(shù)據(jù)數(shù)組
enterCheckedPk: [], // 選中數(shù)據(jù)pk數(shù)組
}
},
watch:{
// 監(jiān)聽渲染列表數(shù)組的變化，一旦變化 執(zhí)行相關(guān)函數(shù)，使全選狀態(tài)下，每一頁按照全選顯示
tableData: {
handler(value) {
if (this.isTableAll) {
let that = this;
let len = that.checkVal.length;
let lenOff = that.unmultipleSelection.length;
value.forEach((row) => {
// 遍歷新請求回來的當(dāng)頁數(shù)據(jù)，和已經(jīng)選擇的數(shù)組中所有對象對比，如果有相同的，說明已經(jīng)選擇了，不再選擇，其他沒有選擇的設(shè)置為選中狀態(tài)
for (let i = 0; i < len; i++) {
if (row.pk_info_manage === that.checkVal[i].pk_info_manage) {
that.$refs.tableData.toggleRowSelection(row, false);
break;
} else {
that.$refs.tableData.toggleRowSelection(row, true);
}
}
// 循環(huán)遍歷新的請求回來的當(dāng)頁數(shù)據(jù)，和手動未選擇的數(shù)組對比，如果有相同的，將其樣式顯示為未選擇狀態(tài)
for (let i = 0; i < lenOff; i++) {
if (
row.pk_info_manage ===
that.unmultipleSelection[i].pk_info_manage
) {
that.$refs.tableData.toggleRowSelection(row, false);
}
}
});
}
},
deep: true,
},
// 跨頁選擇
checkVal: {
handler(newValue, old) {
this.$nextTick(() => {
if (newValue.length > 0) {
if (this.totalNum != newValue.length) {
this.$refs.tableData.store.states.isAllSelected = false;
} else {
this.checkChangeAll = true;
this.$refs.tableData.store.states.isAllSelected = true;
}
} else {
this.$refs.tableData.clearSelection();
}
});
},
},
// 監(jiān)聽未選中的數(shù)據(jù)變化，如果存在則全選數(shù)據(jù)不為全選
unmultipleSelection: {
handler(newValue, old) {
this.enterUnCheckedPk = [];
this.$nextTick(() => {
this.unmultipleSelection.forEach((item) => {
if (this.enterUnCheckedPk.indexOf(item.pk_info_manage) == -1) {
this.enterUnCheckedPk.push(item.pk_info_manage);
}
}); // 獲取未選中的pk
});
},
},
},
methods:{
// 跨頁選擇 給table每個添加不同的key
getRowKeys(row) {
return row.pk_info_manage;
},
// 勾選自定義復(fù)選框方法
handleCheckAllChange() {
this.allChangeFlag = !this.allChangeFlag;
this.unmultipleSelection = []; // 取消選中數(shù)據(jù)
this.enterUnCheckedPk = []; // 取消選中數(shù)據(jù)pk
this.checkVal = []; // 選中數(shù)據(jù)
this.enterCheckedPk = []; // 選中數(shù)據(jù)pk
this.changeSelectAll();
},
changeSelect(selection, row) {
if (this.isTableAll) {
let selected = selection.length && selection.indexOf(row) !== -1; // 為true時選中，為 0 時（false）未選中
// 當(dāng)手動操作為未選中狀態(tài)時
if (!selected) {
// 將未選中的數(shù)據(jù)放在一個變量里
this.unmultipleSelection.push(row);
// 當(dāng)再次手動操作為選中狀態(tài)的時候
} else {
// 為了使再次選中后，將未選擇數(shù)組中的該數(shù)據(jù)刪除掉，遍歷未選擇的數(shù)組 和當(dāng)前操作打√的數(shù)據(jù)比較，如果不同的就過濾留下，相同的就去除。
this.unmultipleSelection = this.unmultipleSelection.filter(
// 如果item.score不等于row.score就留下
(item) => item.pk_info_manage !== row.pk_info_manage,
);
}
} else {
this.unmultipleSelection = [];
}
},
// el-table全選方法
changeSelectAll(val) {
if (!this.isTableAll) {
// 1.1.1遍歷當(dāng)前展示的數(shù)組，使所有的多選框為 √ 選擇狀態(tài)
this.tableData.forEach((row) => {
this.$refs.tableData.toggleRowSelection(row, true);
});
this.isTableAll = true;
// 1.2當(dāng)選擇所有 選項框狀態(tài)為 空 時
} else {
this.isTableAll = false;
// 1.2.1遍歷當(dāng)前展示的數(shù)組，使所有的多選框為 未 選擇狀態(tài)
this.$refs.tableData.clearSelection();
}
},
// 復(fù)選框選擇
handleSelectionChange(val) {
this.checkVal = val;
this.enterCheckedPk = [];
this.checkVal.forEach((item) => {
if (this.enterCheckedPk.indexOf(item.pk_info_manage) == -1) {
this.enterCheckedPk.push(item.pk_info_manage);
}
});
},
}
}
</script>三、代碼實現(xiàn)全選按鈕的半選狀態(tài)
半選實現(xiàn)的思路：
- 未點擊過全選：每次勾選數(shù)據(jù)即為半選；
- 勾選全選：監(jiān)聽未勾選的數(shù)據(jù)，只要存在未勾選數(shù)據(jù)，即為半選。
// 此處代碼為單純半選狀態(tài)的處理
<el-checkbox
:class="allChangeFlag ? 'change-nocheckbox' : 'change-checkbox'"
v-model="checkChangeAll"
@change="handleCheckAllChange"
:disabled="!tableData.length"
:indeterminate="isIndeterminate"
></el-checkbox>
data(){
return {
isIndeterminate: false, // 半選狀態(tài)標(biāo)識
}
},
watch: {
// 跨頁選擇
checkVal: {
handler(newValue, old) {
this.$nextTick(() => {
if (newValue.length > 0) {
if (this.totalNum != newValue.length) {
if(!this.checkChangeAll) {
this.isEnterpriseIndeterminate = true; // 在未勾選全選，手動操作時，再控制半選狀態(tài)
}
this.$refs.tableData.store.states.isAllSelected = false;
} else {
this.checkChangeAll = true;
this.$refs.tableData.store.states.isAllSelected = true;
}
} else {
this.$refs.tableData.clearSelection();
}
});
},
},
// 監(jiān)聽未選中的數(shù)據(jù)變化，如果存在則全選數(shù)據(jù)不為全選
unmultipleSelection: {
handler(newValue, old) {
this.$nextTick(() => {
this.isIndeterminate = newValue.length > 0; // 控制半選狀態(tài)
});
},
},
}四、總結(jié)
實現(xiàn)跨頁全選，本質(zhì)上仍然是前后端配合的，全選標(biāo)識flag、勾選或未勾選pks、查詢的參數(shù)searchParams
- 如果是全選的話，需要前后端配合，設(shè)置全選標(biāo)識flag:true，傳遞全選情況下的查詢條件:searchParams；
- 全選但取消勾選個別幾項，設(shè)置全選標(biāo)識flag: true，傳遞查詢條件searchParams、取消勾選的pk值:pks；
- 若是正常勾選數(shù)據(jù)，進行數(shù)據(jù)操作，設(shè)置全選標(biāo)識flag:false，選中勾選的pk值：pks。
到此這篇關(guān)于vue中table實現(xiàn)真正的跨越全選的文章就介紹到這了,更多相關(guān)vue table跨越全選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于iview按需引用后使用this.$Modal報錯的解決
這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面
這篇文章主要介紹了vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue中$set與$delete的使用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+vue-fullpage實現(xiàn)整屏滾動頁面的示例代碼(直播平臺源碼)
這篇文章主要介紹了vue+vue-fullpage實現(xiàn)整屏滾動頁面,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue面試題及Vue知識點整理，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-10-10
解決Element-ui radio單選框label布爾/數(shù)值的一個坑
這篇文章主要介紹了解決Element-ui radio單選框label布爾/數(shù)值的一個坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue.js整合mint-ui里的輪播圖的方法,首先我們需要初始化vue項目，然后安裝mint-ui。具體內(nèi)容詳情大家通過學(xué)習(xí)2017-12-12
這篇文章主要介紹了如何手動銷毀Vue中掛載的組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue實現(xiàn)超過兩行顯示展開收起的代碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
下面小編就為大家分享一篇vue里面父組件修改子組件樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02