Element跨页全选

一、监听select-all事件、select事件、row-click事件

<el-table v-loading="loading" ref="table" :data="serviceProductList" @select-all="selectAll" @row-click="rowClick" @select="select" >

 

 二、定义参数

queryParams: {
    pageNum: 1,
    pageSize: 10
},
isPageChange: false, //是否页面变化
isSelectAll: false, //是否全选
ids: [], //选中的数据

 

三、编写事件方法

select(selection, row) {
    this.selectionChange(row.serviceCardId);
    console.log("经过2",this.ids)
},
rowClick(row) {
    this.$refs.table.toggleRowSelection(row);
    this.selectionChange(row.serviceCardId);
},
selectionChange(serviceCardId) {
    let index = this.ids.indexOf(serviceCardId);
    if (index != -1) {
        this.ids.splice(index, 1);
    } else {
        this.ids.push(serviceCardId);
    }
},
async selectAll() {
    if (this.isSelectAll && !this.isPageChange) //如果已经全选，但不是页面变化,则取消全选
    {
        this.$refs.table.clearSelection();
        this.isSelectAll = false;
        this.ids = [];
        console.log("经过6",this.ids)
    }
    else if (this.isSelectAll && this.isPageChange) //如果已经全选，并且是页面变化，由页面变化时触发的全选操作，无任何操作
    {
        this.isPageChange = false;
        console.log("经过4",this.ids)
    } else {
        this.loading = true;
        this.isSelectAll = true;
        let queryParams = {...this.queryParams};
        delete queryParams.pageNum;
        delete queryParams.pageSize;
        const res = await serviceCardList(queryParams);
        if (res.code === 200) {
            this.ids = res.data.items.map(item => {
                return item.serviceCardId
            })
            this.loading = false;
        }
        console.log("经过1",this.ids)
    }
},
//页面发生变化时执行
async pageChange() {
    console.log("经过3",this.ids)
    await this.getList();  //注意等获取列表结束
    if (this.isSelectAll) {
        this.isPageChange = true;
        this.$refs.table.toggleAllSelection(); //必须等此段代码完成后才执行
        setTimeout(()=>{
            console.log("经过5",this.ids)
            for (const row of this.serviceProductList) {
                if (this.ids.indexOf(row.serviceCardId) == -1) {
                    this.$refs.table.toggleRowSelection(row, false);
                }
            }
        },500)
    }
    else
    {
        for (const row of this.serviceProductList) {
            if (this.ids.indexOf(row.serviceCardId) != -1) {
                this.$refs.table.toggleRowSelection(row, true);
            }
        }
    }
},