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

Element ui 动态展示表格列,动态格式化表格列的值

需求

后台配置前端展示的表格列,遇到比如  文件大小这样的值,如果后台存的是纯数字,需要进行格式化展示,并且能控制显示的小数位数,再比如,部分列值需要加单位等信息,此外还有状态类,以及特殊值显示的需求等等。效果如下。

动态列

<el-table-column  v-for="item in dynamicTable" v-bind="{[item.newName.length > 3 || item.oldColumnName=='ztm' || item.oldColumnName=='zrz' || item.oldColumnName=='dh' ? 'width': 'nowidth']:item.oldColumnName=='ztm'|| item.oldColumnName=='zrz'? '250':item.oldColumnName=='dh'?'150':item.newName.length>3?'110':'' }"  :label="item.newName" :prop="item.oldColumnName" :key="item.id" @formatter="formatterValue"><template slot-scope="scope"><div v-if="item.oldColumnName=='ztm'" style="text-align: left" v-html="dealZtm(scope.row)"></div><div v-else><div v-if="item.formatHtml" v-html="formatterValue(scope.row[item.oldColumnName],item.formatHtml)"></div><div v-else>{{ scope.row[item.oldColumnName] }}</div></div></template></el-table-column>

动态值方法

formatterValue(v,htmlString) {try {const func = new Function('v', htmlString);const result = func(v);return `${result}`;} catch (error) {return v;}},

后台存放的值

if(v==="mp4"){return "视频";}else if(v==="mp3"){return "音频";}else{return v;}if(v!=''){return parseFloat(v/1024/1024).toFixed(6)+'MB';}else{return v;}if(v!=''){return v+'(秒)';}else{return v;}

注:建议采用密文保存,在解密,防止恶意攻击注入

相关文章:

Element ui 动态展示表格列,动态格式化表格列的值

需求 后台配置前端展示的表格列&#xff0c;遇到比如 文件大小这样的值&#xff0c;如果后台存的是纯数字&#xff0c;需要进行格式化展示&#xff0c;并且能控制显示的小数位数&#xff0c;再比如&#xff0c;部分列值需要加单位等信息&#xff0c;此外还有状态类&#xff0…...

xxl-job调度任务原理解析

xxljob可以对定时任务进行调度&#xff0c;现在看下定时任务调度的过程。XxlJobAdminConfig实现了InitializingBean接口&#xff0c;spring会调用afterPropertiesSet()进行初始化。大致有以下几个过程&#xff1a; admin服务端初始化 JobTriggerPoolHelper.java#toStart()方法…...

实验2 路由器基本配置

实验2 路由器基本配置 一、 原理描述二、 实验目的三、 实验内容四、 实验步骤1.建立实验拓扑2.基础配置3.配置路由器接口IP地址4.查看路由器配置信息5.连通性测试6.使用抓包工具 一、 原理描述 华为设备支持多种配置方式&#xff0c;操作人员要熟悉使用命令行的方式进行设备管…...

docker部署安装整理

centos下安装部署docker 在CentOS下部署Docker&#xff0c;你需要按照以下步骤进行操作&#xff1a; 更新系统&#xff1a; 首先&#xff0c;确保你的CentOS系统是最新的。打开终端&#xff0c;并运行以下命令来更新你的系统&#xff1a; sudo yum update -y安装所需的软件包…...

为什么你明明拥有5年开发经验,但是依然写不出来一份简历?

前端训练营&#xff1a;1v1私教&#xff0c;终身辅导计划&#xff0c;帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~ Hello&#xff0c;大家好&#xff0c;我是 Sunday。 在最近不到一年的时间里&#xff0c;我跟上千位同学进行了沟通&#x…...

【ZZULIOJ】1062: 最大公约数(Java)

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy 提示 code 题目描述 输入两个不大于10的9次方的正整数&#xff0c;输出其最大公约数。 输入 输入两个正整数m和n&#xff0c;数据之间用空格隔开。 输出 输出一个整数&#xff0c;表示m和n的最大公约数。 样…...

北斗导航 | ARAIM算法的原理和性能测试

===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== ARAIM算法的原理和性能测试 针对高级接收机自主完好性监视(ARAIM)算法…...

elasticsearch7安全配置--最低安全等级,用户名密码

上一篇博客在centos7上安装了elasticsearch7 接下来对elasticsearch进行安全方面的配置 minimal security 最低安全等级&#xff0c;用户名密码 首先开启xpack vim config/elasticsearch.yml xpack.security.enabled: true由于我是单机配置的&#xff0c;还加了如下配置 d…...

项目架构MVC,DDD学习

写在前面 本文一起看下项目架构DDD&#xff0c;MVC相关的内容。 1&#xff1a;MVC 不管我们做什么项目&#xff0c;自己想想其实只是做了三件事&#xff0c;如下&#xff1a; 其实&#xff0c;这三件事完全在一个类中做完也可以可以正常把项目完成的&#xff0c;就像下面这…...

SQLite的PRAGMA 声明

PRAGMA 语句是特定于 SQLite 的 SQL 扩展&#xff0c;用于 修改 SQLite 库的操作或查询 SQLite 库 内部&#xff08;非表&#xff09;数据。PRAGMA声明使用相同的 接口作为其他 SQLite 命令&#xff08;例如 SELECT、INSERT&#xff09;但 在以下重要方面有所不同&#xff1a; …...

使用ArrayList.removeAll(List list)导致的机器重启

背景 先说一下背景&#xff0c;博主所在的业务组有一个核心系统&#xff0c;需要同步两个不同数据源给过来的数据到redis中&#xff0c;但是每次同步之前需要过滤掉一部分数据&#xff0c;只存储剩下的数据。每次同步的数据与需要过滤掉的数据量级大概在0-100w的数据不等。 由…...

如何在项目中使用uni-ui组件库

1、安装uni-ui npm i dcloudio/uni-ui 2、组件自动引用 配置easycom 使用 npm 安装好 uni-ui 之后&#xff0c;需要配置 easycom 规则&#xff0c;让 npm 安装的组件支持 easycom 打开项目根目录下的 pages.json 并添加 easycom 节点&#xff1a; // pages.json {"e…...

redis的过期策略和内存淘汰机制(redis篇)

分享并学习一下redis的过期策略和内存淘汰机制 在平时的工作或者学习中&#xff0c;即便自己没有实打实的用过redis。但是能有对这方面的思考&#xff0c;再结合一些实际场景和理论&#xff0c;那么我相信自己或者你都会越来越厉害的。 首先&#xff0c;我们需要认清为啥redis要…...

Java中Runnable和Callable有什么不同?(企业真题)

Java中Runnable和Callable有什么不同&#xff1f; 与之前的方式的对比&#xff1a;与Runnable方式的对比的好处 call()可以有返回值&#xff0c;更灵活 call()可以使用throws的方式处理异常&#xff0c;更灵活 Callable使用了泛型参数&#xff0c;可以指明具体的call()的返回值…...

图机器学习导论

图&#xff1a;描述关系数据的通用语言&#xff0c;起源于哥尼斯堡七桥问题 传统的机器学习&#xff1a;数据样本之间独立同分布&#xff0c;简单拟合数据边界&#xff0c;在传统的机器学习中&#xff0c;每个数据样本彼此无关。传统的神经网络&#xff0c;只能处理简单的表格、…...

地推网推拉新平台哪家强?一文清楚告诉你

在当今这个充满副业的时代&#xff0c;地推网推拉新平台的寻找与对接成为了许多人关注的焦点。那么&#xff0c;我们应该如何找到那些既靠谱又有潜力的拉新项目呢&#xff1f; 经过深入研究和全网检索&#xff0c;我为大家盘点了5个值得一试地推网推拉新平台。 尤其是“聚小推…...

Day:004(4) | Python爬虫:高效数据抓取的编程技术(数据解析)

XPath工具 浏览器-元素-CtrlF 浏览器-控制台- $x(表达式) Xpath helper (安装包需要科学上网) 问题 使用离线安装包 出现 程序包无效 解决方案 使用修改安装包的后缀名为 rar&#xff0c;解压文件到一个文件夹&#xff0c;再用 加载文件夹的方式安装即可 安装 python若使用…...

(80) 只出现一次的数字(81)反转字符串

文章目录 1. 每日一言2. (80) 只出现一次的数字2.1 解题思路2.2 代码 3. (81)反转字符串3.1 解题思路3.2 代码 4. 结语 1. 每日一言 生活是一场即兴表演&#xff0c;值得庆幸的是我们总是有所感受&#xff0c;并且将一直感受下去。 2. (80) 只出现一次的数字 题目链接&#x…...

基于拉格朗日分布算法的电动汽车充放电调度MATLAB程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 程序简介 该模型主要做的是基于拉格朗日分布算法的电动汽车充放电调度模型。利用蒙特卡洛模拟法模拟出电动汽车负荷曲线&#xff0c;并求解出无序充电功率曲线和有序充电曲线&#xff0c;该模型在电动汽车个…...

【Linux 学习】进程优先级和命令行参数!

1. 什么是优先级? 指定进程获取某种资源&#xff08;CPU&#xff09;的先后顺序&#xff1b; Linux 中优先级数字越小&#xff0c;优先级越高&#xff1b; 1.1 优先级和权限的区别&#xff1f; 权限 &#xff1a; 能不能做 优先级&#xff1a; 已经能了&#xff0c;但是获…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...