账号下的用户列表表格分析

好的,这是您提供的 el-table 组件中所有列的字段信息,以表格形式展示:

列标题 (label)字段属性 (prop)对齐方式 (align)宽度 (width)是否可排序 (sortable)说明
IDidcenter100管理员的唯一标识符
头像avatarcenter90管理员的头像 URL 或路径
用户名usernamecenter-管理员的用户名
手机号phonecenter-管理员的手机号码
昵称nicknamecenter-管理员的昵称
已绑定/已订阅-center-已绑定和已订阅的数量,通过模板字符串展示
积点scorecenter-管理员的积分
角色roleNamecenter-管理员的角色名称
层级levelcenter-管理员的层级信息。点击可触发 onQueryInviter 方法。
备注remarkcenter180管理员的备注信息,包含一个编辑备注按钮
活跃度activationcenter-custom管理员的活跃度,支持自定义排序,实际排序字段为 lastLoginTime
状态statuscenter-管理员的状态,包含一个编辑状态按钮。
操作activescenter200对管理员进行操作的按钮,如续订,编辑等。

说明:

  • 无值 - 的宽度: 表示该列的宽度没有显式指定,会根据内容自适应。

  • sortable="custom": 表示该列使用自定义排序逻辑。

  • 模板插槽

    • 已绑定/已订阅: 使用了模板插槽,用于展示 row.bindNum / row.subscribeNum 的组合值。
    • 积点: 使用了模板插槽,用于展示使用 handleNumber 函数格式化后的row.score值。
    • 层级: 使用了模板插槽,点击按钮触发 onQueryInviter 方法。
      * 备注:使用了模板插槽,用于展示row.remark值,并包含一个编辑备注按钮
      * 活跃度: 使用了模板插槽,展示活跃度,并且展示了最近一次的登录时间
  • 操作列: “操作” 列通常用于提供针对每行的操作按钮,如编辑、删除等。

  • 头像列: 使用了 el-avatar 组件展示头像,并使用了 class-name 添加 el-table-column-image 类,通常用于自定义样式。

  • 备注列 使用了el-button 组件展示一个编辑备注的按钮。

  • 状态列 使用了 el-button 展示一个修改状态的按钮

  • setHeaderSort 方法: 此方法根据排序状态设置表头样式,用于展示当前排序方向。

总结:

这个表格展示了管理员列表,包含了管理员的基本信息、状态、操作等。每个列都具有明确的含义,并采用了一些自定义的方式来展示和操作数据。


好的,我们来分析一下代码中 “已绑定/已订阅” 这个逻辑,以及它与后端的关联。

“已绑定/已订阅” 的逻辑

在您提供的代码中,“已绑定/已订阅” 列的渲染逻辑如下:

    <el-table-columnalign="center"label="已绑定/已订阅"><template slot-scope="{row}">{{ `${row.bindNum}/${row.subscribeNum}` }}</template></el-table-column>
  • label="已绑定/已订阅": 这是列的标题,清晰地表明了这一列的用途。
  • template slot-scope="{row}": 使用了 el-table-columnslot-scope 特性。row 变量代表表格当前行的数据对象。
  • {{ r o w . b i n d N u m / {row.bindNum}/ row.bindNum/{row.subscribeNum} }}:
    • 这部分代码使用了 JavaScript 模板字符串,将两个属性值 row.bindNumrow.subscribeNum 拼接在一起,并使用斜杠 / 分隔。
    • row.bindNum:代表该用户已绑定的某种资源的数量。
    • row.subscribeNum:代表该用户已订阅的某种服务的数量。

与后端的关联

  1. 数据来源:

    • row.bindNumrow.subscribeNum 的值来源于后端。 这意味着,当您通过 adminList(query) 请求获取管理员列表数据时,后端 API 需要返回包含 bindNumsubscribeNum 属性的对象数组。例如,后端返回的 JSON 数据可能类似于:
    {"code": 0,"data": {"content":[{"id": 1,"username": "testuser1","phone":"1888888888","bindNum": 5,"subscribeNum": 2,"activation":10,"status":1,"roleName":"超级管理员"},{"id": 2,"username": "testuser2","phone":"1999999999","bindNum": 1,"subscribeNum": 0,"activation":1,"status":1,"roleName":"普通管理员"}],"totalElements":10}
    }
    
  2. 后端逻辑:

    • 后端需要计算 bindNumsubscribeNum 的值。 这两个值通常是数据库查询的结果,需要根据实际的业务逻辑计算出来。
    • bindNum 可能表示:该用户绑定的设备数量,绑定的其他账号数量等。
    • subscribeNum 可能表示:该用户订阅的会员数量,订阅的服务项目数量等。
    • 后端需要将这两个值作为属性返回到前端。
  3. 数据展示:

    • 前端只负责将后端返回的 bindNumsubscribeNum 属性值进行展示,没有进行任何计算或修改。

总结

  • 逻辑层面:
    • "已绑定/已订阅" 列显示的是一个用户已绑定资源和已订阅服务的数量,以 已绑定数量/已订阅数量 格式呈现。
  • 与后端的关联:
    • row.bindNumrow.subscribeNum 这两个属性由后端提供。
    • 后端负责计算并返回这些属性的值。
    • 前端只是接收并展示这些数据,没有修改或计算的逻辑。

因此,“已绑定/已订阅” 的逻辑与后端紧密相关。后端需要提供正确的数据,前端才能正确展示。如果后端没有提供这两个属性,那么这个列将无法正常显示。

请注意,具体的 bindNumsubscribeNum 代表什么需要根据您具体的业务逻辑来确定,上面的描述只是一些示例。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/64228.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GPT-SoVITS语音合成模型部署及使用

1、概述 GPT-SoVITS是一款开源的语音合成模型&#xff0c;结合了深度学习和声学技术&#xff0c;能够实现高质量的语音生成。其独特之处在于支持使用参考音频进行零样本语音合成&#xff0c;即使没有直接的训练数据&#xff0c;模型仍能生成相似风格的语音。用户可以通过微调模…

TongWe7.0-东方通TongWeb控制台无法访问 排查

问题描述&#xff1a;无法访问TongWeb的控制台 逐项排查&#xff1a; 1、控制台访问地址是否正确&#xff1a;http://IP:9060/console #IP是服务器的实际IP地址 2、确认TongWeb进程是否存在&#xff0c;执行命令&#xff1a;ps -ef|grep tongweb 3、确认TongWeb服务启动…

研发文档管理系统:国内外9大选择比较

文章主要对比了9款国内外研发文档管理系统&#xff1a;1.PingCode&#xff1b; 2. Worktile&#xff1b; 3. 飞书&#xff1b; 4. 石墨文档&#xff1b; 5. 腾讯文档&#xff1b; 6. 蓝湖&#xff1b; 7. Confluence&#xff1b; 8. Notion&#xff1b; 9. Slab。 在企业研发过…

【ABAP SAP】开发-BUG修补记录_采购申请打印时品名规格品牌为空

项目场景&#xff1a; TCODE:自开发程序ZMMF004 采购申请打印 问题描述 ZMMF004打印的时候&#xff0c;有的采购申请的品名、规格、品牌为空 原因分析&#xff1a; 1、首先我通过写SQL语句查底表来看这几条采购申请本身有无品名、规格、品牌 SQL语句如下&#xff0c;只需修…

Ubuntu 20.04 24.04 双网卡 Bond 配置指南

前言&#xff1a;在现代服务器管理中&#xff0c;网络的稳定性和可靠性至关重要。为了提高网络的冗余性和负载能力&#xff0c;我们经常需要配置多个网络接口以实现链路聚合或故障转移。Ubuntu系统自17.10版本起&#xff0c;引入了Netplan作为新的网络配置抽象化工具&#xff0…

OCR实践—PaddleOCR

有个项目需求&#xff0c;对拍摄的问卷图片&#xff0c;进行自动得分统计【得分是在相应的分数下面打对号】&#xff0c;输出到excel文件 原始问卷文件见下图&#xff0c;真实的图片因使用手机拍摄的图片&#xff0c;存在一定的畸变&#xff0c; 技术调研 传统方法 传统方法…

ubuntu+ros新手笔记(五):初探anaconda+cuda+pytorch

深度学习三件套&#xff1a;初探anacondacudapytorch 系统ubuntu22.04 ros2 humble 1.初探anaconda 1.1 安装 安装过程参照【详细】Ubuntu 下安装 Anaconda 1.2 创建和删除环境 创建新环境 conda create -n your_env_name pythonx.x比如我创建了一个名为“py312“的环境…

【测试】Pytest

建议关注、收藏&#xff01; 目录 功能pytest 自动化测试工具。 功能 单元测试&#xff1a;用于验证代码的最小功能单元&#xff08;如函数、方法&#xff09;的正确性。 简单的语法&#xff1a;不需要继承特定类或使用复杂的结构。断言语句简化。 自动发现测试&#xff1a;P…

Unity性能优化---使用SpriteAtlas创建图集进行批次优化

在日常游戏开发中&#xff0c;UI是不可缺少的模块&#xff0c;而在UI中又使用着大量的图片&#xff0c;特别是2D游戏还有很多精灵图片存在&#xff0c;如果不加以处理&#xff0c;会导致很高的Batches&#xff0c;影响性能。 比如如下的例子&#xff1a; Batches是9&#xff0…

环境和工程搭建

1.案例介绍 1.1 需求 实现⼀个电商平台 该如何实现呢? 如果把这些功能全部写在⼀个服务⾥, 这个服务将是巨⼤的. 巨多的会员, 巨⼤的流量, 微服务架构是最好的选择. 微服务应⽤开发的第⼀步, 就是服务拆分. 拆分后才能进⾏"各⾃开发" 1.2 服务拆分 拆分原则 …

解决Jmeter HTTP Cookie管理器cookie不生效

解决Jmeter HTTP Cookie管理器cookie不生效问题 解决Jmeter HTTP Cookie管理器cookie不生效问题1、设置Jmeter HTTP Cookie管理器cookie后&#xff0c;发起的请求显示[no cookies]jmeter问题复现&#xff1a;这里同样使用postman进行重试&#xff0c;发现是可以正常获取数据的&…

操作系统课后习题2.2节

操作系统课后习题2.2节 第1题 CPU的效率指的是CPU的执行速度&#xff0c;这个是由CPU的设计和它的硬件来决定的&#xff0c;具体的调度算法是不能提高CPU的效率的&#xff1b; 第3题 互斥性&#xff1a; 指的是进程之间的同步互斥关系&#xff0c;进程是一个动态的过程&#…

二叉搜索树 平衡树(c嘎嘎版)

定义: 二叉搜索树是一种二叉树的树形数据结构,其定义如下: 空树是二叉搜索树。 若二叉搜索树的左子树不为空,则其左子树上所有点的附加权值均小于其根节点的值。 若二叉搜索树的右子树不为空,则其右子树上所有点的附加权值均大于其根节点的值。 二叉搜索树的左右子树均为…

Everything搜索实现

最近编写NTFS文件实时搜索工具, 类似 Everything 这样, 速度快还小巧, 于是花了约3周进行研究, 总结下学习过程中一些经验 实现分3部分完成 一. 解析NTFS 主文件表(MFT) 这一步是获取文件数据的唯一迅速且可靠的来源 NTFS_MFT_Parse.h #pragma once #include "NTFS_Bas…

23.DDD与微服务

学习视频来源&#xff1a;DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 DDD与微服务的关系1. DDD可以用微服务实现&#xff0c;也可以不用微服务实现2. DDD是微服务拆分的必须参考项之一3. 微服务架构…

vscode 打开 setting.json

按下Ctrl Shift P&#xff08;Windows/Linux&#xff09;或Cmd Shift P&#xff08;Mac&#xff09;来打开命令面板。输入open settings&#xff0c;然后选择 Open User Settings(JSON)。打开settings.json文件 ------修改设置-----&#xff1a; 1、 html代码的行长度&am…

汽车电子元件的可靠性保障:AEC-Q102认证

AEC-Q102标准的起源与价值 随着汽车电子系统的日益复杂&#xff0c;电子器件必须能够在极端的温度、湿度、振动和电磁干扰等恶劣条件下保持性能。AEC-Q102标准由汽车电子委员会&#xff08;AEC&#xff09;制定&#xff0c;专门针对LED、激光二极管和光电二极管等光电器件&…

RK3576 Android14,内存大于4G时UVC应用无法申请内存

最近有个项目需要将Linux虚拟成UVC摄像头&#xff0c;开发过程中遇到一个奇怪的事情&#xff0c;通过V4l2框架接口申请内存时&#xff0c;相同的板子&#xff0c;只是内存一个4G一个8G。4G的内存可以申请成功&#xff0c;8G就不行。提示“内存不足” 内存更大反而内存不足&…

RK356X camera 配置

目录 一、RK356x camera硬件 Mipi接口 DVP接口 二、软件链路 三、dts配置 DVP MIPI sensor->dphy->isp_vir 一、RK356x camera硬件 RK356X包含RK3566和RK3568,在camera方面,两颗芯片的软硬件是兼容的,共有两种硬件连接方式:DVP和MIPI。 Mipi接口 图一 如图…

用前端html如何实现2024烟花效果

用HTML、CSS和JavaScript编写的网页&#xff0c;主要用于展示“2024新年快乐&#xff01;”的文字形式烟花效果。下面是对代码主要部分的分析&#xff1a; HTML结构 包含三个<canvas>元素&#xff0c;用于绘制动画。引入百度统计的脚本。 CSS样式 设置body的背景为黑…