element表格当删除最后一页仅有的一条数据时,页面会置空
方法一: 在请求表格数据时做处理
data() {
queryInfo: {
pageNum: 1, // 页码
pageSize: 10, // 每页展示数量
},
total: 0,
tableData: []
}
methods: {
// 请求表格数据
async getTableData() {
const res = await xxxx(你的请求)
/**
* total 数据总量
* records 当前请求页的数据
* pages 数据总页码
*
* 根据实际请求获取
*/
const { total, records, pages } = res
this.tableData = records
this.total = total
// 如果删除数据后当前请求页数据为0 并且 数据总量不为0,则请求上一页的数据,此时上一页就是最后一页,即 pages 。
// 也可以通过this.queryInfo.pageNum -= 1 (但是这样需要判断一下边界条件:修改过后是否为0)
if(records.length === 0 && this.total > 0) {
this.queryInfo.pageNum = pages
this.getTableData()
}
},
// 删除表格数据
async del() {
await xxxx(你的请求)
this.getTableData()
}
}
方法二: 在删除表格数据时做处理
方法二有个问题: 如果表格允许多选删除,当同时删除最后一页仅有的两项时,并不能很好的解决
data() {
queryInfo: {
pageNum: 1, // 页码
pageSize: 10, // 每页展示数量
},
total: 0,
tableData: []
}
methods: {
// 请求表格数据
async getTableData() {
const res = await xxxx(你的请求)
/**
* total 数据总量
* records 当前请求页的数据
* pages 数据总页码
*
* 根据实际请求获取
*/
const { total, records, pages } = res
this.tableData = records
this.total = total
},
// 删除表格数据
async del() {
await xxxx(你的请求)
// 删除的某一页中只有一条数据
if((this.total - 1) % this.queryInfo.pageSize === 0) {
if(this.queryInfo.pageNum > 1) {
this.queryInfo.pageNum -= 1
}
}
// 或者采用此种判断方式: 由于删除单条数据时,仅当当前页面只有一条数据时需要对页码进行判断
//if((this.tableData.length === 1) {
// this.queryInfo.pageNum > 1 ? this.queryInfo.pageNum-- : 1
//}
this.getTableData()
}
}
方法三: 针对表格批量删除
data() {
queryInfo: {
pageNum: 1, // 页码
pageSize: 10, // 每页展示数量
},
total: 0,
tableData: []
selectIds: [] // 批量删除选中的数据
}
methods: {
// 请求表格数据
async getTableData() {
const res = await xxxx(你的请求)
/**
* total 数据总量
* records 当前请求页的数据
* pages 数据总页码
*
* 根据实际请求获取
*/
const { total, records, pages } = res
this.tableData = records
this.total = total
},
// 删除表格数据
async multipleDel() {
await xxxx(你的请求)
if (this.tableData.length <= this.selectIds.length && this.page > 1) {
this.page--;
}
this.getTableData()
}
}