本文实例为大家分享了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()
}
}
})
},
},
以上均已实测可用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。