这篇文章主要为大家详细介绍了vue+iview Table表格多选切换分页保持勾选状态，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue+iview Table表格多选切换分页保持勾选状态的具体代码，供大家参考，具体内容如下
第一种情况（配合后端做选中数据处理）
定义三个参数，是否为全选（isSelectAll）、不是全选时选择的数据（selectObject： []）、反选数据（unSelectObject：[]）
HTML
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() }, //全选当前页 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) } }, // 取消当前页 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() //分页时保留选中状态 if (this.data.length == 0 && this.searchForm.pageIndex > 1) { this.searchForm.pageIndex -= 1 this.getDataList() } } }) },实现效果
全选效果
单独选择效果
整页全选选择效果
整页全选＋单选
第二种情况（只给后端传需要传的数据）
定义一个参数，已选数据（selectObject：[]）
HTML
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(); }, // 选择分页数 onPageSizeChange(param) { this.page.PageSize = param; this.getDataList(); }, // 查询表格数据 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() } } }) }, },以上均已实测可用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是vue+iview Table表格多选切换分页保持勾选状态的详细内容，更多请关注0133技术站其它相关文章！
