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

VUE3给table的head添加popover筛选、时间去除时分秒、字符串替换某字符

1. VUE3给table的head添加popover筛选

<el-tableref="processTableRef"class="process-table"row-key="secuId":data="pagingData"style="width: 100%"highlight-current-row:height="stockListHeight":default-expand-all="isExpand":expand-row-keys="expandRowKeys"v-if="reloadeTable"><el-table-column type="expand"><template #default="props"><div class="table-expand" v-if="!!props.row.eventContent"><div class="el-form-item" v-html="formatText(props.row.eventContent)"></div></div><div v-else class="expand-empty"><span>暂无数据</span></div></template></el-table-column><el-table-column label="债券代码" show-overflow-tooltip prop="secuId"><template #header><el-popover placement="right" trigger="click"><el-select:teleported="false"ref="bondCodeSelection"multiplefilterablecollapse-tagsclearablev-model="securityIds"placeholder@change="bondCodeVisibleChange"@remove-tag="bondCodeVisible = false"><el-option v-for="item in selectIdData" :key="item.value" :value="item.value" :label="item.value"></el-option></el-select><template #reference><label>债券代码<i v-if="securityIds.length < 1" style="margin-left: 10px; cursor: pointer" class="el-icon-search"></i><i v-else style="margin-left: 10px; color: var(--ems-red); cursor: pointer" class="el-icon-search"></i></label></template></el-popover></template><template #default="props">{{ props.row.secuId }}</template></el-table-column>
</el-table>
const bondCodeSelection = ref()
let securityIds: any = ref([])
let bondCodeVisible = ref(false)const bondCodeVisibleChange = () => {bondCodeVisible.value = falsebondCodeSelection.value.blur()
}
//筛选下拉框选项,bondTenderStocks为接口获取数据列表
let selectIdData = computed(() => {let map = new Set()let securitys: any = []bondTenderStocks.value.forEach((item: any) => {if (map.has(item.secuId) === false) {map.add(item.secuId)securitys.push({text: item.secuId + ' ' + item.secuNm,value: item.secuId})}})return securitys
})let displayData = computed(() => {let initData = JSON.parse(JSON.stringify(tableData.value))// 债券代码if (securityIds.value.length !== 0) {let securitySet = new Set()securityIds.value.forEach((security: any) => securitySet.add(security))initData = initData.filter((item: any) => securitySet.has(item.secuId))}return initData
})

2.时间去除时分秒

function getDate(date: any) {if (!date) {return ''}// 将字符串转换为 Date 对象  var date = new Date(dateString);  // 使用 toISOString 方法获取日期时间字符串的简化版本,然后提取年月日部分  var formattedDate = date.toISOString().split('T')[0];  return formattedDate
}

ex:date = "2023-11-02 00:00:00"

3.字符串替换某字符

<div class="el-form-item" v-html="formatText(props.row.eventContent)"></div>function formatText(text: any) {if (!text) {return ''}let result = textif (text.indexOf('\n') >= 0) {let str = text.replace('\n', '')result = str.replace(/\n/g, '</br>')}return result
}ex:
全部替换
let str = "\n债券代码:1680352.IB\n债券简称:16马经发债02\n发行量:17.5亿\n中标量:2.1";  
let newStr = str.replace(/\n/g, "</br>");  //只替换第一个
let newStr = str .replace('\n', '')

相关文章:

VUE3给table的head添加popover筛选、时间去除时分秒、字符串替换某字符

1. VUE3给table的head添加popover筛选 <el-tableref"processTableRef"class"process-table"row-key"secuId":data"pagingData"style"width: 100%"highlight-current-row:height"stockListHeight":default-exp…...

19、XSS——HTTP协议安全

文章目录 一、Weak Session IDs(弱会话IDs)二、HTTP协议存在的安全问题三、HTTPS协议3.1 HTTP和HTTPS的区别3.2 SSL协议组成 一、Weak Session IDs(弱会话IDs) 当用户登录后&#xff0c;在服务器就会创建一个会话&#xff08;Session&#xff09;&#xff0c;叫做会话控制&…...

深圳锐杰金融:用金融力量守护社区健康

深圳市锐杰金融投资有限公司&#xff0c;作为中国经济特区的中流砥柱&#xff0c;近年来以其杰出的金融成绩和坚定的社会责任立场引人注目。然而&#xff0c;这并非一个寻常的金融机构。锐杰金融正在用自己的方式诠释企业责任和慈善精神&#xff0c;通过一系列独特的慈善项目&a…...

python对py文件加密

参考文献&#xff1a; 【编程技巧】py文件批量编译&#xff0c;py批量转pyd&#xff0c;PyCharm设置py转pyd功能_py文件编译pyd-CSDN博客 【Python小技巧】加密又提速&#xff0c;把.py文件编译为.pyd文件&#xff08;类似dll函数库&#xff09;&#xff0c;你值得拥有&#x…...

Thymeleaf生成pdf表格合并单元格描边不显示

生成pdf后左侧第一列的右描边不显示&#xff0c;但是html显示正常 显示异常时描边的写法 cellpadding“0” cellspacing“0” &#xff0c;td,th描边 .self-table{border:1px solid #000;border-collapse: collapse;width:100%}.self-table th{font-size:12px;border:1px sol…...

C# Solidworks二次开发:三种获取SW设计结构树的方法-第二讲

今天这篇文章是接上一篇文章的&#xff0c;主要讲述的是获取SW设计结构树节点的第二种方法。 这个方法获取节点的逻辑是先获取最顶层节点&#xff0c;然后再通过获取顶层节点的子节点一层一层的把所有节点都找出来&#xff0c;也就是需要递归。想要用这个方法就要了解下面几个…...

分布式搜索引擎03

1.数据聚合 聚合(aggregations)可以让我们极其方便的实现对数据的统计、分析、运算。例如: 什么品牌的手机最受欢迎? 这些手机的平均价格、最高价格、最低价格? 这些手机每月的销售情况如何? 实现这些统计功能的比数据库的sql要方便的多,而且查询速度非常快,可以实现近…...

flex布局的flex为1到底是什么

参考博客&#xff1a;flex:1什么意思_公孙元二的博客-CSDN博客 flex&#xff1a;1即为flex-grow&#xff1a;1&#xff0c;经常用作自适应布局&#xff0c;将父容器的display&#xff1a;flex&#xff0c;侧边栏大小固定后&#xff0c;将内容区flex&#xff1a;1&#xff0c;内…...

class050 双指针技巧与相关题目【算法】

class050 双指针技巧与相关题目【算法】 算法讲解050【必备】双指针技巧与相关题目 code1 922. 按奇偶排序数组 II // 按奇偶排序数组II // 给定一个非负整数数组 nums。nums 中一半整数是奇数 &#xff0c;一半整数是偶数 // 对数组进行排序&#xff0c;以便当 nums[i] 为…...

计算机操作系统4

1.什么是进程同步 2.什么是进程互斥 3.进程互斥的实现方法(软件) 4.进程互斥的实现方法(硬件) 5.遵循原则 6.总结&#xff1a; 线程是一个基本的cpu执行单元&#xff0c;也是程序执行流的最小单位。 调度算法&#xff1a;先来先服务FCFS、短作业优先、高响应比优先、时间片…...

【ASP.NET CORE】EntityFrameworkCore 数据迁移

如果数据库中已经有数据结构&#xff0c;可以使用Scaffold-DbContext来同步model&#xff0c;-connection是字符串&#xff0c;-outputdir 是输入文件夹名称&#xff0c;举例的脚本使用的是sqlserver数据库 通用 Scaffold-DbContext -Connection "DatabaseAddress;Data …...

说说React jsx转换成真实DOM的过程?

在React中&#xff0c;JSX&#xff08;JavaScript XML&#xff09;是一种语法糖&#xff0c;用于描述用户界面的结构和组件关系。当你编写React组件并包含JS JSX解析&#xff1a;React中的JSX代码首先会被解析成JavaScript对象。这个过程通常是通过Babel等工具进行的&#xff0…...

MongoDB知识总结

这里写自定义目录标题 MongoDB基本介绍MongoDB基本操作数据库相关集合相关增删改查 MongoDB基本介绍 简单介绍 MongoDB是一个基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产…...

【LeeCode】1.两数之和

给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回…...

Python 作业答疑_6.15~6.18

一、Python 一班 1. 比较字符串 1.1 问题描述 比较两个字符串A和B&#xff0c;字符串A和B中的字符都是大写字母&#xff0c;确定A中是否包含B中所有的字符。 1.2 问题示例 例如&#xff0c;给出A"ABCD"&#xff0c;B"ACD"&#xff0c;返回True&#x…...

Diffusion 公式推导

Diffusion&#xff1a;通过扩散和逆扩散过程生成图像的生成式模型 中已经对 diffusion 的原理进行了直观地梳理&#xff0c;本文对其中的数学推导进行讲解&#xff0c;还是基于 DDPM。 目录 一. 预备知识1. 重参数技巧2. 高斯分布的可加性3. 扩散递推式的由来 二. 扩散过程1. 背…...

【C语言快速学习基础篇】之一基础类型、进制转换、数据位宽

文章目录 一、基础类型(根据系统不同占用字节数会有变化)1.1、有符号整形1.2、无符号整形1.3、字符型1.4、浮点型1.5、布尔型 二、进制转换2.1、二进制2.2、八进制2.3、十进制2.4、十六进制2.5、N进制2.6、进制转换关系对应表 三、数据位宽3.1、位3.2、字节3.3、字3.4、双字3.5…...

使用GPT-4V解决Pycharm设置问题

pycharm如何实现关联&#xff0c;用中文回答 在PyCharm中关联PDF文件类型&#xff0c;您可以按照以下步骤操作&#xff1a; 1. 打开PyCharm设置&#xff1a;点击菜单栏中的“File”&#xff08;文件&#xff09;&#xff0c;然后选择“Settings”&#xff08;设置&#xff09;。…...

qt 安装

目录 前言 一、QT在线安装包下载 1.官方网站&#xff1a; 2.镜像&#xff08;清华大学&#xff09; 二、QT安装 1.更换安装源 2.安装界面 3.组件选择&#xff08;重点&#xff09; 参考 Qt2023新版保姆级 安装教程 前言 本文主要介绍2023新版QT安装过程&#xff0c;…...

【论文合集】在非欧空间中的图嵌入方法(Graph Embedding in Non-Euclidean Space)

文章目录 1. Hyperbolic Models1.1 Hyperbolic Graph Attention Network1.2 Poincar Embeddings for Learning Hierarchical Representations.1.3 Learning Continuous Hierarchies in the Lorentz Model of Hyperbolic Geometry1.4 Hyperbolic Graph Convolutional Neural Net…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

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

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

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...