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

news/2024/12/21 6:04:08/

文章目录

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

1、admin.vue

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

“层级” 列的逻辑

在您的代码中,“层级”列的渲染逻辑如下:

<el-table-columnalign="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-columnslot-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) 方法。

与后端的关联

  1. 数据来源:

    • row.level 的值来源于后端。 当您通过 adminList(query) 请求获取管理员列表数据时,后端 API 需要返回包含 level 属性的对象数组。
    • level 字段可能是一个字符串,也可能是数字,具体类型取决于后端的定义。通常情况下,代表用户在系统中的层级,例如“普通用户”、“VIP用户”、“一级代理”等。
    • 后端返回的 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}}
    
  2. 后端逻辑:

    • 后端需要存储和管理用户的层级信息。 这通常是在用户注册或者管理员修改用户资料时进行的。
    • 后端需要根据用户的层级信息,在查询用户列表时返回正确的 level 值。
    • 后端的 level 字段可能是一个枚举值(例如,0 表示普通用户,1 表示一级代理),或者一个字符串。
  3. 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 组件中。

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


listvue_109">2、inviter-list.vue

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

关键代码回顾

  1. admin 组件中的 el-table-column

    <el-table-columnalign="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 作为参数传递。
  2. admin 组件中的 onQueryInviter 方法:

    public async onQueryInviter(row: any) {// const res: any = await qinviter({ id: row.id })// if (res?.code === 0) {//   console.log(res?.data)// }this.user = rowthis.ilVis = true
    }
    
    • 此方法接收点击行的数据 row
    • 它将 row 赋值给组件的 user 属性,并将组件的 ilVis 属性设置为 true
    • 关键:ilVis 属性的值的改变,会触发 inviter-list 组件的显示,因为它是由 ilVis 属性控制的。
  3. admin组件中的inviter-list组件

      <inviter-list:visible="ilVis":value="user"@close="onInviterListClose"
    />
    
    • inviter-list 组件通过:visible="ilVis" 属性来控制显隐,当 ilVistrue 时,组件显示,为false时,组件隐藏。
    • inviter-list 组件接收 user 作为 value 属性,用于传递数据。
    • inviter-list 组件关闭时会触发 onInviterListClose 方法。

联系方式和跳转原理

  1. 事件绑定与方法调用:

    • el-button@click 事件直接绑定了 admin 组件的 onQueryInviter 方法,这是直接的联系方式。
    • 当用户点击 level 列的按钮时,onQueryInviter 方法会被调用。
  2. 状态管理与条件渲染:

    • onQueryInviter 方法通过修改 ilVis 属性的值来控制 inviter-list 组件的显示。
    • admin 组件中,inviter-list 组件的 visible prop 绑定了 ilVis。当 ilVistrue 时,inviter-list 组件会显示,否则隐藏。
    • 这是一种利用 Vue 的响应式数据和条件渲染机制实现“跳转”效果的方式。
    • 这种跳转并非传统意义上的页面跳转,而是在当前页面根据状态变化展示不同的组件。
  3. 数据传递:

    • onQueryInviter 方法还通过把 row 对象赋值给 user 属性,实现了从 admin 组件向 inviter-list 组件传递数据。
    • inviter-list 组件通过 value 属性接收数据。
  4. 组件通信:

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

总结

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

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

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

在这里插入图片描述


http://www.ppmy.cn/news/1556845.html

相关文章

# Oracle 深入学习 Part 11: Managing Tables(管理表)

作为oracle初学者&#xff0c;在此只讨论普通表类型。 oracle表中的数据类型 ​​​​ 数据类型主要分为四类&#xff1a;文本&#xff0c;数值&#xff0c;日期&#xff0c;二进制 文本&#xff1a; CHAR(N) &#xff1a;固定长字符类型&#xff0c;N为字符长度。内容不够…

自动驾驶控制与规划——Project 2: 车辆横向控制

目录 零、任务介绍一、环境配置二、算法三、代码实现四、效果展示 零、任务介绍 补全src/ros-bridge/carla_shenlan_projects/carla_shenlan_stanley_pid_controller/src/stanley_controller.cpp中的TODO部分。 一、环境配置 上一次作业中没有配置docker使用gpu&#xff0c;…

mfc140u.dll是什么文件?如何解决mfc140u.dll丢失的相关问题

遇到“mfc140u.dll文件丢失”的错误通常影响应用程序的运行&#xff0c;这个问题主要出现在使用Microsoft Visual C环境开发的软件中。mfc140u.dll是一个重要的系统文件&#xff0c;如果它丢失或损坏&#xff0c;会导致相关程序无法启动。本文将简要介绍几种快速有效的方法来恢…

如何使用arping命令检测IP地址冲突?

不同的操作系统对于IP地址冲突都有着不同的检测与解决方法。 在Windows系统之中&#xff0c;如果出现IP地址冲突&#xff0c;系统会显示图表进行提示&#xff0c;你可以根据图标来进行后续的操作&#xff0c;尽可能的避免IP地址冲突带来的影响。 而在Linux系统之中是没有类似的…

url提取

很久没有接触这类题目了&#xff0c;发现还是很考察基础的&#xff0c;不过基本手敲两遍就会了。 题目&#xff1a; 有这样一个 URL&#xff1a;http://item.taobao.com/item.htm?a1&b2&c&dxxx&e&#xff0c;请写一段 JS 程序提取 URL 中的各个 GET 参数(参…

需求解读文档

目录 引言产品概述需求详细解读与技术方案 1. 一张图模块 1.1 多格式三维数据导入1.2 三维地图引擎1.3 空间测量功能1.4 图层管理 2. 户籍数据管理模块 2.1 批量数据导入2.2 关联房屋信息2.3 人员信息编辑2.4 人员分类标记2.5 多条件查询2.6 数据权限管理 3. 房屋信息管理模块…

【波数】常见波数计算公式及分析

1. 常见的波数计算公式 通常&#xff0c;在声学中&#xff0c;波数 的计算公式取决于介质的性质和声波的频率。以下是两种常见的波数计算方式&#xff1a; &#xff08;1&#xff09;理想气体中的波数计算&#xff08;空气等&#xff09; 在空气或类似的介质中&#xff0c;…

数说故事聚焦“卖车”场景,推出AI汽车销售转化解决方案

没错&#xff0c;“卖车”我们也在行&#xff0c;为某车企“保住”了新车上市的订单。 深耕汽车行业多年&#xff0c;该车企10月份刚发布一款新能源车&#xff0c;其前期已经拥有了大量的保有客户和线上多渠道获取的潜在客户&#xff0c;然而&#xff0c;仍面临两大难题&#x…