亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue+iview?Table表格多選切換分頁保持勾選狀態(tài)

 更新時(shí)間:2022年07月06日 08:03:15   作者:LBJsagiri  
這篇文章主要為大家詳細(xì)介紹了vue+iview?Table表格多選切換分頁保持勾選狀態(tài),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue使用Swiper的案例詳解

    Vue使用Swiper的案例詳解

    這篇文章主要介紹了Vue使用Swiper的案例詳解,主要包括引入swiper,創(chuàng)建輪播圖組件CarouselContainer.vue的詳細(xì)代碼,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • vue實(shí)現(xiàn)圖形驗(yàn)證碼登錄

    vue實(shí)現(xiàn)圖形驗(yàn)證碼登錄

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖形驗(yàn)證碼登錄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享

    vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享

    這篇文章主要介紹了vue2.0 如何在hash模式下實(shí)現(xiàn)微信分享,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue-cli構(gòu)建項(xiàng)目使用 less的方法

    vue-cli構(gòu)建項(xiàng)目使用 less的方法

    這篇文章主要介紹了vue-cli構(gòu)建項(xiàng)目使用 less,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊功能

    vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue中的項(xiàng)目打包及部署全流程

    Vue中的項(xiàng)目打包及部署全流程

    這篇文章主要介紹了Vue中的項(xiàng)目打包及部署全流程,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 在vue中使用express-mock搭建mock服務(wù)的方法

    在vue中使用express-mock搭建mock服務(wù)的方法

    這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法,文中給大家提到了在vue-test-utils 中 mock 全局對象的相關(guān)知識 ,需要的朋友可以參考下
    2018-11-11
  • vue實(shí)現(xiàn)文字檢索時(shí)候?qū)⑺阉鲀?nèi)容標(biāo)紅功能

    vue實(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
  • Element?UI安裝全過程

    Element?UI安裝全過程

    element?ui?就是基于vue的一個(gè)ui框架,該框架基于vue開發(fā)了很多相關(guān)組件,方便我們快速開發(fā)頁面,餓了么前端團(tuán)隊(duì)基于vue進(jìn)行開發(fā)并且進(jìn)行了開源?element?ui?中提供全部都是封裝好組件,本文給大家介紹Element?UI安裝全過程,感興趣的朋友一起看看吧
    2024-01-01
  • 深入淺析golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等)

    深入淺析golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等)

    這篇文章主要介紹了golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-02-02

最新評論