vue+iview?Table表格多選切換分頁保持勾選狀態(tài)
本文實(shí)例為大家分享了vue+iview Table表格多選切換分頁保持勾選狀態(tài)的具體代碼,供大家參考,具體內(nèi)容如下
第一種情況(配合后端做選中數(shù)據(jù)處理)
定義三個(gè)參數(shù),是否為全選(isSelectAll)、不是全選時(shí)選擇的數(shù)據(jù)(selectObject: [])、反選數(shù)據(jù)(unSelectObject:[])
HTML
<Alert show-icon v-show="openTip"> ?? ??? ??? ? ? ? ? ? ? ? ?已選擇 ? ? ? ? ? ? ? <span class="select-count" v-if="isSelectAll">{{ total-unSelectObject.length }}</span> 項(xiàng) ? ? ? ? ? ? ? <span class="select-count" v-if="!isSelectAll">{{ selectObject.length }}</span> 項(xiàng) ? ? ? ? ? ? ? <a class="select-clear" @click="clearSelectAll">清空</a> ? ? ? ? ? ? ? <span class="button"> ? ? ? ? ? ? ? ? <Button @click="onSelectAll" type="primary">全選</Button> ? ? ? ? ? ? ? </span> ? ? ? ? ? ? ? <span class="button"> ? ? ? ? ? ? ? ? <Button @click="selectAllcancel" type="primary">取消全選</Button> ? ? ? ? ? ? ? </span> ? ? ? ? ? ? </Alert> ? ? ? ? ? ? <Table ? ? ? ? ? ? ? :loading="loading" ? ? ? ? ? ? ? border ? ? ? ? ? ? ? :columns="columns" ? ? ? ? ? ? ? :data="data" ? ? ? ? ? ? ? @on-select-all="selectAll" ? ? ? ? ? ? ? @on-select-all-cancel="cancelAll" ? ? ? ? ? ? ? @on-select="TableSelectRow" ? ? ? ? ? ? ? @on-select-cancel="TableSelectCancelRow" ? ? ? ? ? ? > ? ? ? ? ? ? </Table> ? ? ? ? ? ? <Row type="flex" justify="end" class="page"> ? ? ? ? ? ? ? <Page ? ? ? ? ? ? ? ? :current="searchForm.pageIndex" ? ? ? ? ? ? ? ? :total="total" ? ? ? ? ? ? ? ? :page-size="searchForm.pageSize" ? ? ? ? ? ? ? ? @on-change="changePage" ? ? ? ? ? ? ? ? @on-page-size-change="changePageSize" ? ? ? ? ? ? ? ? :page-size-opts="[10, 20, 50]" ? ? ? ? ? ? ? ? size="small" ? ? ? ? ? ? ? ? show-total ? ? ? ? ? ? ? ? show-elevator ? ? ? ? ? ? ? ? show-sizer ? ? ? ></Page> </Row>
data
data: [], isSelectAll: false, condition: '', selectObject: [], unSelectObject: [], selectEquipsIds: '0',
JS
// 全選 onSelectAll() { this.isSelectAll = true this.getDataList() ? ? }, ?? ?//取消全選 ? ? selectAllcancel() { ? ? ? this.isSelectAll = false ? ? ? this.selectEquipsIds = '0' ? ? ? this.getDataList() ? ? }, ?? ?//全選當(dāng)前頁 ? ? selectAll() { ? ? ? if (this.isSelectAll) { ? ? ? ? for (let i = this.data.length - 1; i >= 0; i--) { ? ? ? ? ? var _index = this.unSelectObject.indexOf(this.data[i].id) ? ? ? ? ? if (_index != -1) { ? ? ? ? ? ? this.unSelectObject.splice(_index, 1) ? ? ? ? ? } ? ? ? ? } ? ? ? ? console.log(this.unSelectObject) ? ? ? } else { ? ? ? ? for (let i = this.data.length - 1; i >= 0; i--) { ? ? ? ? ? this.selectObject.push(this.data[i].id) ? ? ? ? } ? ? ? ? console.log(this.selectObject) ? ? ? } ? ? }, ? ? // 取消當(dāng)前頁 ? ? cancelAll() { ? ? ? if (this.isSelectAll) { ? ? ? ? for (let i = this.data.length - 1; i >= 0; i--) { ? ? ? ? ? this.unSelectObject.push(this.data[i].id) ? ? ? ? } ? ? ? ? ?console.log(this.unSelectObject) ? ? ? } else { ? ? ? ? for (let i = this.data.length - 1; i >= 0; i--) { ? ? ? ? ? var _index = this.selectObject.indexOf(this.data[i].id) ? ? ? ? ? if (_index != -1) { ? ? ? ? ? ? this.selectObject.splice(_index, 1) ? ? ? ? ? } ? ? ? ? } ? ? ? ? console.log(this.selectObject) ? ? ? } ? ? }, ? ? // 選中一行 ? ? TableSelectRow(selection, row) { ? ? ? if (this.isSelectAll) { ? ? ? ? var _index = this.unSelectObject.indexOf(row.id) ? ? ? ? if (_index != -1) { ? ? ? ? ? this.unSelectObject.splice(_index, 1) ? ? ? ? ? console.log(this.unSelectObject) ? ? ? ? } ? ? ? } else { ? ? ? ? if (!this.selectObject.includes(row.id)) { ? ? ? ? ? this.selectObject.push(row.id) ? ? ? ? ? console.log(this.selectObject) ? ? ? ? } ? ? ? } ? ? }, ? ? // 取消選中一行 ? ? TableSelectCancelRow(selection, row) { ? ? ? if (this.isSelectAll) { ? ? ? ? this.unSelectObject.push(row.id) ? ? ? } else { ? ? ? ? var _index = this.selectObject.indexOf(row.id) ? ? ? ? if (_index != -1) { ? ? ? ? ? this.selectObject.splice(_index, 1) ? ? ? ? ? console.log(this.selectObject) ? ? ? ? } ? ? ? } ? ? }, ? ? // 判斷是否選中 ? ? sortData() { ? ? ? if (this.isSelectAll) { ? ? ? ? for (let i = this.data.length - 1; i >= 0; i--) { ? ? ? ? ? if (!this.unSelectObject.includes(this.data[i].id)) { ? ? ? ? ? ? this.data[i]._checked = true ? ? ? ? ? } ? ? ? ? } ? ? ? } else { ? ? ? ? if (this.selectObject.length) { ? ? ? ? ? this.data.forEach((ele) => { ? ? ? ? ? ? if (this.selectObject.includes(ele.id)) ele._checked = true ? ? ? ? ? }) ? ? ? ? } ? ? ? } ? ? }, ?? ?getDataList() { ? ? ? // 多條件搜索用戶列表 ? ? ? this.loading = true ? ? ? api().then((res) => { ? ? ? ? this.loading = false ? ? ? ? if (res.success) { ? ? ? ? ? this.data = res.result?.records ? ? ? ? ? this.sortData() ?//分頁時(shí)保留選中狀態(tài) ? ? ? ? ? if (this.data.length == 0 && this.searchForm.pageIndex > 1) { ? ? ? ? ? ? this.searchForm.pageIndex -= 1 ? ? ? ? ? ? this.getDataList() ? ? ? ? ? } ? ? ? ? } ? ? ? }) },
實(shí)現(xiàn)效果
全選效果
單獨(dú)選擇效果
整頁全選選擇效果
整頁全選+單選
第二種情況(只給后端傳需要傳的數(shù)據(jù))
定義一個(gè)參數(shù),已選數(shù)據(jù)(selectObject:[])
HTML
<div class="table-div">? ?? ??? ??? ?<Table :columns="columns"? ?? ??? ??? ??? ?:data="tableList"? ?? ??? ??? ??? ?@on-select-all="selectAll"? ?? ??? ??? ??? ?@on-select-all-cancel="cancelAll"? ?? ??? ??? ??? ?@on-select="TableSelectRow"? ?? ??? ??? ??? ?@on-select-cancel="TableSelectCancelRow" /> ?? ??? ?</div> ?? ??? ?<Row type="flex" justify="end" class="page"> ? ? ? ? ? ? ? <Page ? ? ? ? ? ? ? ? :current="searchForm.pageIndex" ? ? ? ? ? ? ? ? :total="total" ? ? ? ? ? ? ? ? :page-size="searchForm.pageSize" ? ? ? ? ? ? ? ? @on-change="changePage" ? ? ? ? ? ? ? ? @on-page-size-change="changePageSize" ? ? ? ? ? ? ? ? :page-size-opts="[10, 20, 50]" ? ? ? ? ? ? ? ? size="small" ? ? ? ? ? ? ? ? show-total ? ? ? ? ? ? ? ? show-elevator ? ? ? ? ? ? ? ? show-sizer ? ? ? ></Page> </Row>
data
data: [], selectObject: [],
JS
//判斷是否選中? sortData() { ? ? ? ? if (this.selectEquipsIds.length) { ?? ??? ??? ??? ??? ?this.tableList.forEach(ele => { ?? ??? ??? ??? ??? ??? ?if (this.selectEquipsIds.includes(ele.id)) ele._checked = true; ?? ??? ??? ??? ??? ?}) ?? ??? ??? ??? ?} ?? ??? ??? ?}, ?? ??? ??? ?// 選中一行 ?? ??? ??? ?TableSelectRow(selection, row) { ?? ??? ??? ??? ?if (!this.selectEquipsIds.includes(row.id)) { ?? ??? ??? ??? ??? ?this.selectEquipsIds.push(row.id); ?? ??? ??? ??? ??? ?? ?? ??? ??? ??? ?} ?? ??? ??? ?}, ?? ??? ??? ?// 取消選中一行 ?? ??? ??? ?TableSelectCancelRow(selection, row) { ?? ??? ??? ??? ?var _index = this.selectEquipsIds.indexOf(row.id); ?? ??? ??? ??? ?if (_index != -1) { ?? ??? ??? ??? ??? ?this.selectEquipsIds.splice(_index, 1); ?? ??? ??? ??? ??? ?? ?? ??? ??? ??? ?} ?? ??? ??? ?}, ?? ??? ??? ?// 選中所有 ?? ??? ??? ?selectAll() { ?? ??? ??? ??? ?for (let i = this.tableList.length - 1; i >= 0; i--) { ?? ??? ??? ??? ??? ?this.TableSelectRow(null, this.tableList[i]); ?? ??? ??? ??? ?} ?? ??? ??? ?}, ?? ??? ??? ?// 取消選中所有 ?? ??? ??? ?cancelAll() { ?? ??? ??? ??? ?for (let i = this.tableList.length - 1; i >= 0; i--) { ?? ??? ??? ??? ??? ?this.TableSelectCancelRow(null, this.tableList[i]); ?? ??? ??? ??? ?} ?? ??? ??? ?}, ?? ??? ??? ?// 翻頁查詢 ?? ??? ??? ?onChange(param) { ?? ??? ??? ??? ?this.page.PageIndex = param; ?? ??? ??? ??? ?this.getDataList(); ?? ??? ??? ?}, ?? ??? ??? ?// 選擇分頁數(shù) ?? ??? ??? ?onPageSizeChange(param) { ?? ??? ??? ??? ?this.page.PageSize = param; ?? ??? ??? ??? ?this.getDataList(); ?? ??? ??? ?}, ?? ??? ??? ?// 查詢表格數(shù)據(jù)? ?? ??? ??? ?getDataList() { ?? ??? ? ? ? ?// 多條件搜索用戶列表 ?? ??? ? ? ? ?this.loading = true ?? ??? ? ? ? ?api().then((res) => { ?? ??? ? ? ? ? ?this.loading = false ?? ??? ? ? ? ? ?if (res.success) { ?? ??? ? ? ? ? ? ?this.data = res.result?.records ?? ??? ? ? ? ? ? ?this.sortData() ?? ??? ? ? ? ? ? ?// this.total = res.result.total ?? ??? ? ? ? ? ? ?if (this.data.length == 0 && this.searchForm.pageIndex > 1) { ?? ??? ? ? ? ? ? ? ?this.searchForm.pageIndex -= 1 ?? ??? ? ? ? ? ? ? ?this.getDataList() ?? ??? ? ? ? ? ? ?} ?? ??? ? ? ? ? ?} ?? ??? ? ? ? ?}) ?? ??? ? ? ?}, },
以上均已實(shí)測可用。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue使用動(dòng)態(tài)組件實(shí)現(xiàn)TAB切換效果完整實(shí)例
- vue實(shí)現(xiàn)tab欄切換效果
- Vue中的table表單切換實(shí)現(xiàn)效果
- vue?router如何實(shí)現(xiàn)tab切換
- vue實(shí)現(xiàn)鼠標(biāo)滑動(dòng)展示tab欄切換
- Vue實(shí)現(xiàn)選項(xiàng)卡tab切換制作
- vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)
- vue實(shí)現(xiàn)tab路由切換組件的方法實(shí)例
- Vue實(shí)現(xiàn)tab切換的兩種方法示例詳解
相關(guān)文章
vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享
這篇文章主要介紹了vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01vue-cli構(gòu)建項(xiàng)目使用 less的方法
這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目使用 less,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法,文中給大家提到了在vue-test-utils 中 mock 全局對象的相關(guān)知識 ,需要的朋友可以參考下2018-11-11vue實(shí)現(xiàn)文字檢索時(shí)候?qū)⑺阉鲀?nèi)容標(biāo)紅功能
這篇文章主要介紹了vue中實(shí)現(xiàn)文字檢索時(shí)候?qū)⑺阉鲀?nèi)容標(biāo)紅,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08深入淺析golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等)
這篇文章主要介紹了golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02