vue2 el-table实现跨页多选功能

1、首先要在el-table上绑定勾选框和全选框的事件

<el-table :data="tableData" class="table_box" ref="multipleTables" style="width: 100%" height="50vh" @select="addAnalysisChange" @select-all="selectAll">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="名称" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="orgcode" label="机构代码" show-overflow-tooltip>
</el-table-column>
...
</el-table>

2、在data里声明一个数组 用来存放勾选的项 allSelected

3、开始编写js啦

// 单独勾选
addAnalysisChange(selection,row) {
    if (!this.allSelected.includes(row.id)) {
        this.allSelected.push(row.id);
    } else {
        // 取消勾选就删掉
        this.allSelected.forEach((id, index) => {
    if (id === row.id) {
        this.allSelected.splice(index, 1);
    }
    });
    }
},
selectAll(selecteds) {
    if (selecteds.length > 0) {
        // 如果全选 push进去
    selecteds.forEach(item => {
    if (!this.allSelected.includes(item.id)) {
        this.allSelected.push(item.id);
    }
    });
} else {
    // 如果取消全选 就将此页表格的id 过滤掉
    const currentPageIds = this.tableData.map(item => item.id);
    this.allSelected= this.allSelected.filter(id =>!currentPageIds.includes(id));
    }
},

原文地址：https://blog.csdn.net/qq_43962582/article/details/144399036

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！