点击数字层级从 admin.vue 跳转到 inviter-list.vue 组件

文章目录

1、admin.vue
2、inviter-list.vue

1、admin.vue

好的，我们来分析一下代码中"层级"这一列的逻辑，并探讨它与后端的关联。

"层级" 列的逻辑

在您的代码中，"层级"列的渲染逻辑如下：

html 复制代码

<el-table-column
  align="center"
  prop="level"
  label="层级"
>
  <template slot-scope="{row}">
    <el-button type="text" size="small" @click="onQueryInviter(row)">{{ row.level }}</el-button>
  </template>
</el-table-column>

prop="level" : 这指定了表格列的数据来源，即当前行数据的 level 属性。
label="层级": 这是列的标题，表明这一列显示的是用户的层级信息。
template slot-scope="{row}" : 使用了 el-table-column 的 slot-scope 特性，row 代表当前行的数据对象。
<el-button type="text" size="small" @click="onQueryInviter(row)">{``{ row.level }}</el-button> :
- 使用了 Element UI 的 el-button 组件，样式为 text 类型的按钮，大小为 small。
- 按钮文本显示当前行的 row.level 值。
- 点击按钮时，会触发 onQueryInviter(row) 方法。

与后端的关联

数据来源：

row.level 的值来源于后端。 当您通过 adminList(query) 请求获取管理员列表数据时，后端 API 需要返回包含 level 属性的对象数组。
level 字段可能是一个字符串，也可能是数字，具体类型取决于后端的定义。通常情况下，代表用户在系统中的层级，例如"普通用户"、"VIP用户"、"一级代理"等。
后端返回的 JSON 数据可能包含：

json 复制代码

  {
    "code": 0,
    "data": {
        "content":[
         {
            "id": 1,
            "username": "testuser1",
            "level": "一级代理",
              "phone":"1888888888",
            "bindNum": 5,
            "subscribeNum": 2,
            "activation":10,
            "status":1,
             "roleName":"超级管理员"
          },
           {
            "id": 2,
            "username": "testuser2",
             "level": "普通用户",
            "phone":"1999999999",
            "bindNum": 1,
            "subscribeNum": 0,
              "activation":1,
            "status":1,
             "roleName":"普通管理员"
          }
          ],
          "totalElements":10
      }
  }

后端逻辑：
- 后端需要存储和管理用户的层级信息。 这通常是在用户注册或者管理员修改用户资料时进行的。
- 后端需要根据用户的层级信息，在查询用户列表时返回正确的 level 值。
- 后端的 level 字段可能是一个枚举值（例如，0 表示普通用户，1 表示一级代理），或者一个字符串。
onQueryInviter(row) 方法:
- 这个方法会在点击层级按钮时触发。
- 虽然 onQueryInviter 方法在前端定义，但是它可能会与后端交互，具体取决于该方法的实现。
- 从您的代码中可以看到，onQueryInviter 方法最终是把 row 赋值给 this.user ，然后将 ilVis 置为 true，显示一个 inviter-list 的组件
- 而 inviter-list 组件内部逻辑，可能会向后端发起请求，例如获取用户的下级列表等。

总结

逻辑层面：
- "层级"列显示了用户在系统中的层级，通过按钮形式展示并且可以触发点击事件。
与后端的关联：
- row.level 属性由后端提供， 代表用户的层级信息。
- 后端负责管理、存储和返回用户的层级信息。
- onQueryInviter 方法的点击，虽然是前端处理，但是它可能会和后端交互，根据当前用户的层级信息，从后端获取当前用户的下级列表等。

因此，"层级"列的逻辑与后端有密切关系。后端必须正确地提供用户的层级信息，并且正确处理 onQueryInviter 方法的点击可能触发的请求，前端才能正确展示层级信息。

是否所有逻辑都与后端有关？

并不是所有逻辑都与后端有关。

前端负责
- el-button 组件的渲染和样式，点击事件触发 onQueryInviter(row) 方法，
- el-table-column 的显示方式和属性
后端负责
- row.level 数据的提供。
- onQueryInviter 方法可能会触发的请求
前后端交互
- 前端向后端请求数据，并展示在 el-table 中。
- 点击按钮时，会触发 onQueryInviter(row)，此方法可能会向后端请求数据，并展示到 inviter-list 组件中。

总而言之，虽然"层级"列的显示逻辑主要在前端，但数据和部分交互逻辑依赖于后端，两者相互配合才能实现完整的功能。

2、inviter-list.vue

好的，我们来深入分析一下 onQueryInviter 方法是如何与 inviter-list.vue 组件联系起来，并实现点击"层级"按钮后跳转到 inviter-list.vue 组件的。

关键代码回顾

admin 组件中的 el-table-column：
html 复制代码
```
<el-table-column
  align="center"
  prop="level"
  label="层级"
>
  <template slot-scope="{row}">
    <el-button type="text" size="small" @click="onQueryInviter(row)">{{ row.level }}</el-button>
  </template>
</el-table-column>
```
- 在 admin 组件的表格中，level 列使用 el-button 展示层级信息，并绑定 @click="onQueryInviter(row)" 事件。
- 当点击这个按钮时，会调用 admin 组件的 onQueryInviter 方法，并将当前行的数据对象 row 作为参数传递。
admin 组件中的 onQueryInviter 方法：
typescript 复制代码
```
public async onQueryInviter(row: any) {
  // const res: any = await qinviter({ id: row.id })
  // if (res?.code === 0) {
  //   console.log(res?.data)
  // }
  this.user = row
  this.ilVis = true
}
```
- 此方法接收点击行的数据 row。
- 它将 row 赋值给组件的 user 属性，并将组件的 ilVis 属性设置为 true。
- 关键：ilVis 属性的值的改变，会触发 inviter-list 组件的显示 ，因为它是由 ilVis 属性控制的。
admin组件中的inviter-list组件
html 复制代码
```
  <inviter-list
  :visible="ilVis"
  :value="user"
  @close="onInviterListClose"
/>
```
- inviter-list 组件通过:visible="ilVis" 属性来控制显隐，当 ilVis 为 true 时，组件显示，为false时，组件隐藏。
- inviter-list 组件接收 user 作为 value 属性，用于传递数据。
- inviter-list 组件关闭时会触发 onInviterListClose 方法。

联系方式和跳转原理

事件绑定与方法调用：
- el-button 的 @click 事件直接绑定了 admin 组件的 onQueryInviter 方法，这是直接的联系方式。
- 当用户点击 level 列的按钮时，onQueryInviter 方法会被调用。
状态管理与条件渲染：
- onQueryInviter 方法通过修改 ilVis 属性的值来控制 inviter-list 组件的显示。
- 在 admin 组件中，inviter-list 组件的 visible prop 绑定了 ilVis。当 ilVis 为 true 时，inviter-list 组件会显示，否则隐藏。
- 这是一种利用 Vue 的响应式数据和条件渲染机制实现"跳转"效果的方式。
- 这种跳转并非传统意义上的页面跳转，而是在当前页面根据状态变化展示不同的组件。
数据传递：
- onQueryInviter 方法还通过把 row 对象赋值给 user 属性，实现了从 admin 组件向 inviter-list 组件传递数据。
- inviter-list 组件通过 value 属性接收数据。
组件通信:

通过 :visible 属性和 @close 属性，实现了 admin 组件和 inviter-list 组件的组件通信

总结

onQueryInviter 方法与 inviter-list.vue 组件的联系，是通过以下几个关键步骤实现的：

触发： 用户点击 level 列的按钮，触发 admin 组件的 onQueryInviter 方法。
状态改变： onQueryInviter 方法修改了 admin 组件的 ilVis 属性为 true。
条件渲染： admin 组件中的 inviter-list 组件根据 ilVis 属性的改变，显示或隐藏。
数据传递： onQueryInviter 方法将点击行的数据 row 赋值给 admin 组件的 user 属性，并通过 prop 传递给 inviter-list 组件。

这种方式并非传统的页面跳转，而是利用 Vue 的响应式和组件化特性，在同一个页面中根据状态改变动态展示不同的组件。 这种方式在单页应用中非常常见，用于实现复杂的交互和信息展示。