Vue实战经验总结和问题解决思路（三）

刺骨的言语ヽ痛彻心扉 2023-10-03 11:02 9阅读 0赞

**目录**

1.技巧-快速在调试工具中找到组件及组件中的状态

2.分页异常处理之删除

3.分页异常处理之添加

4.在表单中做编辑时表格中数据也跟着变

5.赋值表单数据

6.添加完成之后的分页bug

7.删除权限点

--------------------

#### 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：

![20210715003107678.png][]

解2：

this.roleForm = JSON.parse(JSON.string(row))

--------------------

### 5.赋值表单数据 ###

--------------------

**要达到的效果：**点选部门时，将选中的部门信息展示到部门输入框中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][]

**思路：**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.  调用接口删除数据
2.  更新表格

--------------------

步骤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(() => {
    
        })
      }

[20210715003107678.png]: https://img-blog.csdnimg.cn/20210715003107678.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210715004854570.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70