关于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,输出杨辉三角的前 n 行。 如果你不知道什么是杨辉三角,可以观察样例找找规律。 ## 输入格式 ## 输出格式 ## 样例 #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 中,markdown文档最终都会转换成为 html文件,我们在访问的时候,也是直接访问的 xxx.html 文件。而且,markdown文档会被作为 [vue单文件] 进行处理,因此,我们我们可以在文档中使用 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语言的世界里,函数是一等公民,可以被赋值给变量,这种特殊的变量就是我们今天要探讨的主角——函数指针。函数指针作为C语言中一种强大的工具,允许我们以间接方式调用函数,从而实现动态绑定、回调函数、策略模式等多…...
《UE5_C++多人TPS完整教程》学习笔记1 ——《P2 关于本课程(About This Course)》
本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P2 关于本课程(About This Course)》 的学习笔记,该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版,UP主(也是译者&…...
权限系统设计
权限系统设计 RBAC 基于角色的访问控制 ABAC 基于属性的访问控制 普通的系统无非 CRUD,那系统如何控制一个用户该看到哪些数据、能操作哪些功能?日常开发中最常用到 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:介绍 docker解决哪些问题: 传统APP在安装到不同电脑的时候可能会遇到依赖问题,比如缺少VS 20xx,软件无法运行”的情况。docker使用容器技术将软件 依赖打包为image包发布,解决了依赖问题。docker有一个官…...
RibbonBar RibbonPage切换事件
在开发的过程中,我们会用到点击切换page,来响应对应的事件,例如以下事件: 头文件中: void ribboncurrentPageIndexChanged(int index); 实现文件中: connect(ribbonBar(), SIGNAL(currentPageIndexChang…...
Conda历史版本下载地址和python对应关系
一、前言 因为Conda安装版本问题,带来了很多问题,虽然不能直接确定二者之间的关系,但是安装指定版本的conda,确实是一个比较好的方法。特此记忆。 二、下载地址 下载最新版本:Free Download | Anaconda 下载历史版本ÿ…...
Clickhouse查询语句执行过程
问题 简述clickhosue中一条select语句的执行过程,使用的引擎是ReplacingMergeTree。例如: select col1,col2 from table final prewhere col3 > ? and col4 ? and col5 ? -- col3为分区键,col4为二级索引,col5为主键字段 where col…...
【动态规划】【中位数】【C++算法】1478. 安排邮筒
# 作者推荐 【深度优先搜索】【树】【图论】2973. 树中每个节点放置的金币数目 本文涉及知识点 动态规划汇总 LeetCode1478. 安排邮筒 给你一个房屋数组houses 和一个整数 k ,其中 houses[i] 是第 i 栋房子在一条街上的位置,现需要在这条街上安排 k…...
C#系列-数据结构+递归算法+排序算法(3)
C#数据结构 在C#中,数据结构是用于组织和管理数据的方式,以便更有效地进行数据的存储、访问和操作。数据结构对于算法的性能和设计至关重要,因为它们决定了数据如何在内存中布局以及如何与算法进行交互。C#提供了许多内置的数据结构…...
Redis实现秒杀
前期准备 缓存选择考虑 Redis和Redis Cluster(分布式版本),是一个分布式缓存系统。其支持多种数据结构,也支持MQ。Redis在性能上做了大量优化。因此使用Redis或者Redis Cluster就可以轻松实现一个强大的秒杀系统。 用Redis的这…...
4 scala集合-Map
和 Java 一样,Scala 也有表示键值对(Key-Value)集合的 Map 数据结构。同样,Map 也分不可变和可变,不可变需要使用类 scala.collection.mutable.Map。 1 不可变 Map 可以使用以下语法定义不可变 Map 对象 val/var ma…...
QT 对象树模型
QObject是Qt里边绝大部分类的根类 QObject对象之间是以对象树的形式组织起来的。 当两个QObject(或子类)的对象建立了父子关系的时候。子对象就会加入到父对象的一个成员变量叫children(孩子)的list(列表)…...
ubuntu快速安装miniconda
ubuntu快速安装miniconda 环境 ubuntu.22.04 显卡 RTX 3050 关于选择Miniconda还是Anaconda的问题,Anaconda安装包比较大,耗时比较长,如果你是绝对的初学者,选择Anaconda会比较稳妥一些;否则建议你还是选择Miniconda安…...
阿里云游戏服务器多少钱一年?
阿里云游戏服务器租用价格表:4核16G服务器26元1个月、146元半年,游戏专业服务器8核32G配置90元一个月、271元3个月,阿里云服务器网aliyunfuwuqi.com分享阿里云游戏专用服务器详细配置和精准报价: 阿里云游戏服务器租用价格表 阿…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天,数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具,在大规模数据获取中发挥着关键作用。然而,传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时,常出现数据质…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发,使用DevEco Studio作为开发工具,采用Java语言实现,包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
CVPR2025重磅突破:AnomalyAny框架实现单样本生成逼真异常数据,破解视觉检测瓶颈!
本文介绍了一种名为AnomalyAny的创新框架,该方法利用Stable Diffusion的强大生成能力,仅需单个正常样本和文本描述,即可生成逼真且多样化的异常样本,有效解决了视觉异常检测中异常样本稀缺的难题,为工业质检、医疗影像…...
深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向
在人工智能技术呈指数级发展的当下,大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性,吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型,成为释放其巨大潜力的关键所在&…...
深入解析 ReentrantLock:原理、公平锁与非公平锁的较量
ReentrantLock 是 Java 中 java.util.concurrent.locks 包下的一个重要类,用于实现线程同步,支持可重入性,并且可以选择公平锁或非公平锁的实现方式。下面将详细介绍 ReentrantLock 的实现原理以及公平锁和非公平锁的区别。 ReentrantLock 实现原理 基本架构 ReentrantLo…...
