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;}

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

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

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

相关文章

数据结构--循环队列

1.队列的定义: 和栈相反,队列(queue)是一种先进先出(first in first out,缩写为FIFO)的线性表.它只允许在表的一端进行插入,而在另一端删除元素. 在队列中,允许插入的一端叫做队尾(rear),允许删除的一端则称为队头(front). 2.循环队列的设计图示: 3.循环队列的结构设计: ty…

Vue.js npm错误:transpileDependencies.map不是一个函数

这个错误通常是由于npm版本不兼容导致的。在旧版本的npm中&#xff0c;transpileDependencies是一个字符串数组&#xff0c;我们可以直接配置需要编译的依赖库。而在较新版本的npm中&#xff0c;transpileDependencies被改成了一个对象&#xff0c;并且需要使用map()方法来处理…

【数据交换格式】网络socket编程温度采集智能存储与上报项目技术------JSON、TLV

作者简介&#xff1a; 一个平凡而乐于分享的小比特&#xff0c;中南民族大学通信工程专业研究生在读&#xff0c;研究方向无线联邦学习 擅长领域&#xff1a;驱动开发&#xff0c;嵌入式软件开发&#xff0c;BSP开发 作者主页&#xff1a;一个平凡而乐于分享的小比特的个人主页…

【C++成长记】C++入门 | 类和对象(上) |面向过程和面向对象初步认识、类的引入、类的定义、类的访问限定符及封装

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;C❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 一、面向过程和面向对象初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步…

C++设计模式:代理模式(十三)

1、代理模式 定义&#xff1a;为其他对象提供一种代理以控制&#xff08;隔离使用接口&#xff09;对这个对象的访问等。 动机 在面向对象系统中&#xff0c;有些对象由于某种原因&#xff08;比如对象需要进程外的访问等&#xff0c;例如在分布式的系统中&#xff09;&#x…

【项目实战经验】DataKit迁移MySQL到openGauss(下)

上一篇我们分享了安装、设置、链接、启动等步骤&#xff0c;本篇我们将继续分享迁移、启动~ 目录 9. 离线迁移 9.1. 迁移插件安装 中断安装&#xff0c;比如 kill 掉java进程&#xff08;安装失败也要等待300s&#xff09; 下载安装包准备上传 缺少mysqlclient lib包 mysq…

【零基础学数据结构】双向链表

1.双向链表的概念 1.1头节点 1.2带头双向循环链表 注意&#xff1a; 哨兵位创建后&#xff0c;首尾连接自己 1.3双链表的初始化 // 双向链表的初始化 void ListInit(ListNode** pphead) {// 给双链表创建一个哨兵位*pphead ListBuyNode(-1); } 2.双向链表的打印 // 双向…

为什么在cmd中输入jupyter notebook会出现问题

C:\Users\REBECCA329>jupyter notebook jupyter 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 这是什么意思&#xff1f;这个说明在cmd中找不到jupyter notebook&#xff0c;说明没有添加到环境变量里去&#xff0c;在配置R内核的时候找不到&#xff…

TSINGSEE青犀AI智能分析网关V4叉车载货出入库检测算法介绍及应用

随着物流行业的快速发展&#xff0c;叉车作为物流运输的重要设备&#xff0c;其安全性和效率性越来越受到人们的关注。然而&#xff0c;在实际操作中&#xff0c;由于人为因素和操作环境的复杂性&#xff0c;叉车事故时有发生&#xff0c;给企业和个人带来了巨大的损失。为了提…

一些错误的记录

Linux使用rz命令出现乱码&#xff1f; 使用下面的命令上传&#xff1a; rz -besz filename //从linux操作系统上下载文件&#xff08;夹&#xff09;到本地云服务器上的redis连接不上&#xff0c;本地的图形化界面 1.在云服务器控制台-防火墙开放6379端口(使用命令开放端口不…

MySQL-进阶篇-一条sql更新语句是如何执行的(redo log和binlog)

上一篇&#xff1a;一条sql查询语句是如何执行的 http://t.csdnimg.cn/nV3EY 摘自&#xff1a;林晓斌MySQL实战45讲——第二篇 更新语句的执行过程与上一篇查询流程相同&#xff0c;本篇简写。 但多了两个重要的日志模块&#xff1a;redo log&#xff08;重做日志&#xff0…

CorelDRAW2024破解注册机授权码分享

CorelDRAW是一款由加拿大Corel公司开发的平面设计软件&#xff0c;主要用于矢量图形制作、排版和编辑。它以其强大的功能和用户友好的界面而广受欢迎&#xff0c;被广泛应用于各个领域&#xff0c;包括设计、广告、出版和印刷等。 CDR2017-2024全版本下载网盘汉化版链接: http…

js可视化爬取数据生成当前热点词汇图

功能 可以爬取到很多数据&#xff0c;并且生成当前的热点词汇图&#xff0c;词越大越热门&#xff08;词云图&#xff09; 这里以b站某个评论区的数据为例&#xff0c;爬取63448条数据生成这样的图片 让我们能够更加直观的看到当前的热点 git地址 可以直接使用&#xff0c;中文…

如何通过多媒体设计迅速为科普展厅制作提供清晰的思路?

随着数字化信息时代的迅速发展&#xff0c;各类领域的知识内容变得愈发繁杂&#xff0c;于是为了针对性地向大众普及各方面知识&#xff0c;各地域都会选择建设科普展厅的方式来实现这一目的&#xff0c;并在当中运用先进的多媒体技术&#xff0c;用以加强公众对相关知识的理解…

使用 HBuilderX自动上传Uniapp 微信小程序代码

HBuilderX内置相关环境&#xff0c;开箱即用&#xff0c;无需配置nodejs。本文只介绍发布微信小程序的步骤。 1.下载和安装 HBuilderX hbuilder首页&#xff1a;https://www.dcloud.io/hbuilderx.html 下载hbuilder编辑器,选择对应的系统,Windows和mac正式版即可,下载后免安…

海康4G摄像机国标注册失败,接入国标28181视频监控平台失败的问题分析、排查、解决

目录 一、问题现象 &#xff08;一&#xff09;背景 &#xff08;二&#xff09;在平台端&#xff0c;设备显示在线&#xff0c;通道不能传到平台端 &#xff08;二&#xff09;直接把通道接入进来&#xff0c;查看是否&#xff0c;显示请求超时 二、问题分析 &#xff0…

【计算机毕业设计】企业销售人员培训——后附源码

&#x1f389;**欢迎来到琛哥的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 琛哥&#xff0c;一名来自世界500强的资深程序猿&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 琛哥在深度学习任务中展现出卓越的能力&a…

Windows下使用PanguVip实现浮动IP

在某些高可用场景下&#xff0c;我们往往需要使用浮动IP来进行实际访问的切换&#xff0c;比如为了保证Web应用的高可用&#xff0c;当主节点宕机后&#xff0c;我们将浮动IP切换到备节点&#xff0c;那么备节点就继续可以提供服务&#xff0c;在linux下我们可以使用keepalived…

常见点云文件解析

常见点云文件解析 1. 为什么会有这么多的点云文件2. 常见的点云文件格式解析2.1 pcd格式2.2 off格式2.3 xyz格式2.4 ply格式2.5 obj格式2.6 stl格式 1. 为什么会有这么多的点云文件 我们在做2D视觉时&#xff0c;处理的就是类似一系列类似的二维数组&#xff0c;数组以图片的形…

第1章 计算机网络体系结构

王道学习 【考纲内容】 &#xff08;一&#xff09;计算机网络概述 计算机网络的概念、组成与功能&#xff1b;计算机网络的分类&#xff1b; 计算机网络的性能指标 &#xff08;二&#xff09;计算机网络体系结构与参考模型 计算机网络分层结…