基于项目中分页经常出错的情况，整理以下常见情景及对应解决办法：
常见场景
- 多tab页面，每个页面都有分页，tab切换分页出错
- 页面中有多个搜索项，搜索后或清空搜索项分页出错
- 新增、编辑、删除后分页显示错误
解决方案
- 多tab页代码不要放在一个文件中，每个tab页放在独立的文件中
- 一般性搜索和普通拉列表公用一个接口，因此前端也只需写一个获取数据函数
- 新增、编辑、删除成功后立即调用获取数据函数
- 删除后判断是否删除本页最后一条记录逻辑，如删除最后一条记录，跳转上一页
(前端代码一个文件代码量建议不超过500行)
技术实现
- 多tab页面分离，参考智慧楼宇代码src/views/video/videoDevice.vue文件及涉及相关代码
//关键代码示例
<el-tabs style="margin-top: 10px" v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="全部" name="first">
//recordTable组件是单个tab分支页面
<recordTable :search="form" type="first" ref="first"/>
</el-tab-pane>
<el-tab-pane label="识别成功" name="second">
<recordTable :search="form" type="second" ref="second"/>
</el-tab-pane>
<el-tab-pane label="识别失败" name="third">
<recordTable :search="form" type="third" ref="third"/>
</el-tab-pane>
</el-tabs>
- 一般性搜索和普通拉列表公用一个接口，因此前端也只需写一个获取数据函数
（请参考智慧楼宇代码src/views/video/recordTable.vue） - 删除后判断是否删除本页最后一条记录逻辑，如删除最后一条记录，跳转上一页
删除成功后，拉取数据的接口中添加逻辑判断（参考智慧楼宇代码src/views/liftManage.vue中deleteMember函数方法）
if（返回数据条数=0 && 当前页数>1）{
//设置当前页码-1
//重新调用获取数据函数
}else{
//处理数据相关代码
}
4.开发小技巧，如遇两个页面很类似时，可使用vue的mixins混合技巧
（参考智慧楼宇代码src/views/system/devicePass.vue中deleteMember函数方法），代码如下
<script type="text/javascript">
import passSetting from './password'
import { restCorpDevicePassword } from '@/api/login'
export default {
mixins: [ passSetting ],
methods: {
updatePass(){
this.$refs.passForm.validate((valid) => {
if(valid){
if(this.passForm.password != this.passForm.repass){
this.$message.error('两次密码输入不一致!')
return;
}
let params = {};
params.password = this.aesEncry(this.passForm.password);
params.corpId = this.corpId;
params.code = this.aesEncry(this.passForm.code);
params.phone = this.aesEncry(this.phone);
restCorpDevicePassword(params).then(response => {
if(response.status == 200){
if (response.data.error == 200) {
this.$message.success('密码重置成功');
}else{
this.$message.error(response.data.error_description);
}
}else{
this.$message.error(response.data.error_description);
}
})
}
})
},
}
}
</script>
