当前位置: 首页 > news >正文

关于vue2+antd 信息发布后台不足的地方

有的写法可以cv

1.序号递增

{title: "序号",customRender: (text, record, index) => `${index + 1}`,align: "center",},

2.关于类型

  {title: "类型",dataIndex: "type",align: "center",customRender: function (t) {switch (Number.parseInt(t)) {case 0:return "区域";case 1:return "街道";}},},

3.关于  scopedSlots: 时间范围有效字段表格用法

  {title: "时间段",dataIndex: "playTimes",scopedSlots: { customRender: "playTimes" },align: "center",},
 <div slot="playTimes" slot-scope="{ record }">{{ record.startTime }}~{{ record.endTime }}</div>

4.关于删除

 {title: "操作",align: "center",scopedSlots: { customRender: "action" },width: 150,},
 <div slot="action" slot-scope="{ record }"><a-popconfirmtitle="删除会将同一区域的不同时间段数据一并删除,确认删除吗?"@confirm="() => deleteRecord(record)"><a :disabled="isDisabled">删除</a></a-popconfirm></div>

重点:a-popconfirm气泡框

5.关于字典

1.首先我先定义字段

 {title: "级别",align: "center",dataIndex: "level",scopedSlots: { customRender: "level" },},

2.其次我渲染字段

 <div slot="level" slot-scope="{ text }">{{ text | textList(dictionaryList) }}</div>

3.dictionaryList设置为空一开始初始化时候

 dictionaryList: [],

4.引入字典

import { getDictionary } from "@/api/index";

5.在@/api/index中获取统一框架数据字典列表 这是根据后端提供的api

//获取统一框架数据字典列表
export function getDictionary (type) {return request({// url: '/upms/dict/item/page',// url: '/upms/dict/item/' + id,url: '/upms/dict/type/' + type,method: 'get',// params: query})
}

6.获取字典

 getDictionary() {getDictionary("district_level").then((res) => {//dictionaryList上面定义过的 得到字典值this.dictionaryList = res.data.data;});},

7.看到步骤2那边时vue2的过滤器

  filters: {textList(val, list) {//这里看不懂的话可以打印下 val 和list 总的来说就是值相等返回代表的中文let mm = "";list.forEach((item) => {if (item.value == val) {mm = item.label;}});return mm;},},

6.关于动态的action,前面5种是虽然包含变换 但是还不够动态

我说的动态action举例:比如在这个状态下我的action只有应用和详情,在那个状态下 我的actionshiyou 停止和详情 ,通过record.status判断

 {key: "action",title: "操作",fixed: "right",align: "center",scopedSlots: { customRender: "action" },width: 200,},
      <div slot="action" slot-scope="{ record }"><a @click="showApplication(record)" v-if="record.status != 1">应用</a><a @click="showCease(record)" v-if="record.status == 1">停止</a><a-divider type="vertical" /><a style="margin-right: 8px" @click="viewRecord(record)"> 详情 </a><astyle="margin-right: 8px"@click="editRecord(record)"v-if="record.status != 1">编辑</a><a-popconfirmtitle="确定删除吗?"@confirm="() => deleteRecord(record.id)"v-if="record.status != 1"><a>删除</a></a-popconfirm></div>

7.表格枚举显示和字典有点相似,找不到字典就自己写枚举

1.在utils文件夹里的utils.js写代码

/*** 表格枚举显示*/
export function renderTypeName(typeArr,value
) {//备注:类型如果是数字的且为0时,!value为falseif (!typeArr.length || value === "") return "--";const currentArr = typeArr.filter(item => {return item.value === value;});if (!currentArr.length) return "--";return currentArr[0].text;
}

2.新建enumeration文件夹,命名payTypeEnum.js

export const BALANCE = 'BALANCE';
export const SYS_BALANCE = 'SYS_BALANCE';
export const  MONEY = ' MONEY';
export const POS = 'POS';
export const  BANK = ' BANK';
export const WECHAT_PAY = 'WECHAT_PAY';
export const ALI_PAY = 'ALI_PAY';export const payTypeEnumList = [{text: '钱包余额',value: BALANCE},{text: '系统赠送金额',value: SYS_BALANCE},{text: '现金',value: BALANCE},{text: 'POS刷卡',value: POS},{text: '银行转账',value: BANK},{text: '微信扫码',value: WECHAT_PAY},{text: '支付宝扫码',value: ALI_PAY},
] 

3.在需要的文件引入这两个代码

import { payTypeEnumList } from "@/enumeration/payTypeEnum.js";
import { renderTypeName } from "@/utils/util";

4.使用

  {key: "payType",title: "支付方式",dataIndex: "payType",align: "center",// scopedSlots: { customRender: "payType" },customRender(h) {return renderTypeName(payTypeEnumList, h);},},

以上就是我做vue2时碰到表格渲染出现的问题 

主要是字典,枚举和动态渲染action 

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

相关文章:

关于vue2+antd 信息发布后台不足的地方

有的写法可以cv 1.序号递增 {title: "序号",customRender: (text, record, index) > ${index 1},align: "center",}, 2.关于类型 {title: "类型",dataIndex: "type",align: "center",customRender: function (t) {sw…...

Ubuntu+Anaconda 常用指令记录

Anaconda 使用指令记录 1 创建环境 conda create -n name pythonx.x(python版本自己指定)例如 conda create --name myenv: 创建名为"myenv"的新环境。 conda activate myenv: 激活名为"myenv"的环境。 conda deactivate: 退出当前环境。 2 删除环境 c…...

P5732 【深基5.习7】杨辉三角 python解法

# 【深基5.习7】杨辉三角 ## 题目描述 给出 n<20&#xff0c;输出杨辉三角的前 n 行。 如果你不知道什么是杨辉三角&#xff0c;可以观察样例找找规律。 ## 输入格式 ## 输出格式 ## 样例 #1 ### 样例输入 #1 6 ### 样例输出 #1 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5…...

VitePress-12-markdown中使用vue的语法

前言 VitePress 中&#xff0c;markdown文档最终都会转换成为 html文件&#xff0c;我们在访问的时候&#xff0c;也是直接访问的 xxx.html 文件。而且&#xff0c;markdown文档会被作为 [vue单文件] 进行处理&#xff0c;因此&#xff0c;我们我们可以在文档中使用 vue 语法&…...

“bound drug/molecule”or “unbound drug/molecule”、molecule shape、sketching是什么?

“bound drug/molecule”or “unbound drug/molecule” For clarity, the following terms will be used throughout this study: “bound drug/molecule” (or “unbound drug/molecule”) refers to the drug/molecule that is bound (or unbound) to proteins [48]. 意思就是…...

深入理解C语言中的函数指针:概念、机制及实战应用

在C语言的世界里&#xff0c;函数是一等公民&#xff0c;可以被赋值给变量&#xff0c;这种特殊的变量就是我们今天要探讨的主角——函数指针。函数指针作为C语言中一种强大的工具&#xff0c;允许我们以间接方式调用函数&#xff0c;从而实现动态绑定、回调函数、策略模式等多…...

《UE5_C++多人TPS完整教程》学习笔记1 ——《P2 关于本课程(About This Course)》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P2 关于本课程&#xff08;About This Course&#xff09;》 的学习笔记&#xff0c;该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版&#xff0c;UP主&#xff08;也是译者&…...

权限系统设计

权限系统设计 RBAC 基于角色的访问控制 ABAC 基于属性的访问控制 普通的系统无非 CRUD&#xff0c;那系统如何控制一个用户该看到哪些数据、能操作哪些功能&#xff1f;日常开发中最常用到 RBAC 和 OAuth2 这两种访问控制和授权方案 RBAC 基于角色的访问控制 所有的访问控制模…...

Ubuntu Desktop - Screenshot (截图工具)

Ubuntu Desktop - Screenshot [截图工具] 1. Search your computer -> Screenshot -> Lock to Launcher2. gnome-screenshot3. System Settings -> Keyboard -> ShortcutsReferences 1. Search your computer -> Screenshot -> Lock to Launcher 2. gnome-s…...

docker 1:介绍

docker 1&#xff1a;介绍 docker解决哪些问题&#xff1a; 传统APP在安装到不同电脑的时候可能会遇到依赖问题&#xff0c;比如缺少VS 20xx&#xff0c;软件无法运行”的情况。docker使用容器技术将软件 依赖​打包为image包发布&#xff0c;解决了依赖问题。docker有一个官…...

RibbonBar RibbonPage切换事件

在开发的过程中&#xff0c;我们会用到点击切换page&#xff0c;来响应对应的事件&#xff0c;例如以下事件&#xff1a; 头文件中&#xff1a; void ribboncurrentPageIndexChanged(int index); 实现文件中&#xff1a; connect(ribbonBar(), SIGNAL(currentPageIndexChang…...

Conda历史版本下载地址和python对应关系

一、前言 因为Conda安装版本问题&#xff0c;带来了很多问题&#xff0c;虽然不能直接确定二者之间的关系&#xff0c;但是安装指定版本的conda,确实是一个比较好的方法。特此记忆。 二、下载地址 下载最新版本&#xff1a;Free Download | Anaconda 下载历史版本&#xff…...

Clickhouse查询语句执行过程

问题 简述clickhosue中一条select语句的执行过程&#xff0c;使用的引擎是ReplacingMergeTree。例如&#xff1a; select col1,col2 from table final prewhere col3 > ? and col4 ? and col5 ? -- col3为分区键&#xff0c;col4为二级索引,col5为主键字段 where col…...

【动态规划】【中位数】【C++算法】1478. 安排邮筒

# 作者推荐 【深度优先搜索】【树】【图论】2973. 树中每个节点放置的金币数目 本文涉及知识点 动态规划汇总 LeetCode1478. 安排邮筒 给你一个房屋数组houses 和一个整数 k &#xff0c;其中 houses[i] 是第 i 栋房子在一条街上的位置&#xff0c;现需要在这条街上安排 k…...

C#系列-数据结构+递归算法+排序算法(3)

C#数据结构 在C#中&#xff0c;数据结构是用于组织和管理数据的方式&#xff0c;以便更有效地进行数据的存储、访问和操作。数据结构对于算法的性能和设计至关重要&#xff0c;因为它们决定了数据如何在内存中布局以及如何与算法进行交互。C#提供了许多内置的数据结构&#xf…...

Redis实现秒杀

前期准备 缓存选择考虑 Redis和Redis Cluster&#xff08;分布式版本&#xff09;&#xff0c;是一个分布式缓存系统。其支持多种数据结构&#xff0c;也支持MQ。Redis在性能上做了大量优化。因此使用Redis或者Redis Cluster就可以轻松实现一个强大的秒杀系统。 用Redis的这…...

4 scala集合-Map

和 Java 一样&#xff0c;Scala 也有表示键值对&#xff08;Key-Value&#xff09;集合的 Map 数据结构。同样&#xff0c;Map 也分不可变和可变&#xff0c;不可变需要使用类 scala.collection.mutable.Map。 1 不可变 Map 可以使用以下语法定义不可变 Map 对象 val/var ma…...

QT 对象树模型

QObject是Qt里边绝大部分类的根类 QObject对象之间是以对象树的形式组织起来的。 当两个QObject&#xff08;或子类&#xff09;的对象建立了父子关系的时候。子对象就会加入到父对象的一个成员变量叫children&#xff08;孩子&#xff09;的list&#xff08;列表&#xff09;…...

ubuntu快速安装miniconda

ubuntu快速安装miniconda 环境 ubuntu.22.04 显卡 RTX 3050 关于选择Miniconda还是Anaconda的问题&#xff0c;Anaconda安装包比较大&#xff0c;耗时比较长&#xff0c;如果你是绝对的初学者&#xff0c;选择Anaconda会比较稳妥一些&#xff1b;否则建议你还是选择Miniconda安…...

阿里云游戏服务器多少钱一年?

阿里云游戏服务器租用价格表&#xff1a;4核16G服务器26元1个月、146元半年&#xff0c;游戏专业服务器8核32G配置90元一个月、271元3个月&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云游戏专用服务器详细配置和精准报价&#xff1a; 阿里云游戏服务器租用价格表 阿…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...