1.技巧-快速在调试工具中找到组件及组件中的状态
步骤1：在创建组件时，记得给组件设置name选项
步骤2：在vue的插件中，可以搜索组件的name
2.分页异常处理之删除
业务场景:如果删除最后一页的最一条数据之后，页面会显示不正常
原因：如果删除第最后一页（假设是第4页）的最一条数据之后，再发请求，还是求的第4页，而此时，后端已经求不到第4 页的数据了（被删除了）。
思路：在删除成功之后，去检测一下，是否当前删除的是当前页最后一条数据，如果是，就把页码-1，再发请求
// 2. 如果当前表格中只有一条，删除之后自动请求上一页数据 + if (this.roles.length === 1) { + this.pageParams.page-- + if (this.pageParams.page <= 0) { + this.pageParams.page = 1 + } + } 然后执行下面的逻辑：重新发送请求
小结：删除时固定要处理的逻辑：删最后一条时，要更新页码
3.分页异常处理之添加
处理此问题的思路：
要明确两点：第一，谁控制页面上的按钮页码
第二，谁控制不同页码对应的数据
这其实是一个闭环，如你设置a变量代表你要第几页的数据，传给接口，后台返回给你a页面的数据，拿到数据后，再把后台返回的页码赋值回去，做到对应的页码对应对应的数据
解决第一个疑惑：
<el-pagination layout="prev, pager, next" :total="total" + :current-page.sync="curPage" //这个变量控制页面页码数 :page-size="pageParams.pageSize" @current-change="hCurrentChange" /> -------------data中--------------- return { // 省略其他... + curPage: 1,//这个变量控制页面页码数 }
解决第二个疑惑：答案是你传给接口的参数
async loadRoles() { try { const res = await getRoles(this.pageParams.page, this.pageParams.pageSize) this.roles = res.data.rows this.total = res.data.total + this.curPage = this.pageParams.page } catch (err) { console.log(err) } },
补充计算属性
computed: { // 表格中最大的页码 maxNum() { return Math.ceil(this.total / this.pageParams.pageSize) }, // 最后一页是不是满的 isLastPageFulled: function() { return this.total % this.pageParams.pageSize === 0 } },
async doAdd() { try { // if(表格的最后一页是满) { // 想查看最新添加的数据，要跳到最大页码的下一页 // } if (this.isLastPageFulled) { this.pageParams.page = this.maxNum + 1 } else { // 想查看最新添加的数据，要跳到最大页码 this.pageParams.page = this.maxNum } // if (this.isLastPage && this.roles.length === this.pageParams.pageSize) { // this.pageParams.page++ // // 页码++ // } // 3. 重发请求 this.loadRoles() console.log(res) } catch (err) { console.log(err) } },
4.在表单中做编辑时表格中数据也跟着变
业务场景：在表单中做编辑时表格中数据也跟着变
原因：这里有一个引用关系： this.roleForm和row指向同一个对象，改了一个，另一个也受影响
解决：将浅拷贝变成深拷贝
解1：
解2：
this.roleForm = JSON.parse(JSON.string(row))
5.赋值表单数据
要达到的效果：点选部门时，将选中的部门信息展示到部门输入框中
思路：1.给el-tree添加点击事件
2.只有叶子节点（没有下级的节点）才能被选上，如果还有子节点就不做处理
3.把选中的内容显示在表单元素上
4.隐藏树
唯一需要注意点就是hNodeClick竟然自带两个参数么？一定要打印看看是什么东西
代码：
<el-tree v-if="showTree" :data="treeData" :props="{ label: 'name' }" @node-click="hNodeClick" />
// 用户在部门结构树上点击 hNodeClick(data, node) { console.log('用户在部门结构树上点击', data, node) // 如果当前部门还有子部门，则不能选中 if (data.children.length) { return } console.log('选中的是', data.name) // 1. 把当前选中的显示在input框中 this.formData.departmentName = data.name // 2. 隐藏tree this.showTree = false }
6.添加完成之后的分页bug
业务场景：添加完成之后，就能立刻看到添加的数据，而不要手动去点击分页
步骤1：补充数据项
return { + curPage: 1, // 当前的页码-设置给分页组件的 // 省略其他.... }
步骤2：修改视图:在分页组件上补充current-page
<el-pagination + :current-page.sync="curPage" // 省略其他... />
步骤3：更新hUpdateEmployess:获取数据成功之后，更新curPage
async loadEmployee() { try { const res = await getEmployee(this.page, this.size) console.log(res) this.employees = res.data.rows this.total = res.data.total + this.curPage = this.page // 通知分页组件去更新页码数据 } catch (err) { console.log(err) } }
步骤4：更新loadEmployee: 看最后一页是不是满的
hUpdateEmployee() { // 1. 关闭弹层 this.showDialog = false // 2. 更新表格数据 // if(最后一页是满的){ // this.page = 最大页面 + 1 // } // else (最后一页不是满) { // // 最大页面的下一页 // this.page = 最后一页的页码 // } // this.total : 一共几条 16 // this.size: 每页显示几条 5 if (this.total % this.size === 0) { this.page = (this.total / this.size) + 1 } else { // 最后一页的页码 this.page = Math.floor(this.total / this.size) + 1 } this.loadEmployee() }
7.删除权限点
效果：实现删除功能
思路：
点击删除按钮时，询问用户是否删除，确认删除：
- 调用接口删除数据
- 更新表格
步骤1：注册点击事件
<el-button size="small" type="text" @click="hDel(scope.row.id)">删除</el-button>
步骤2：点击时发送删除请求
async doDel(id) { try { const res = await delPermission(id) console.log(res) this.loadPermissionList() this.$message.success('删除成功') } catch (err) { console.log(err) this.$message.error('删除失败') } }, // 用户点击删除 hDel(id) { // alert(id) this.$confirm('你确定要删除吗？').then(() => { this.doDel(id) }).catch(() => { }) }
