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', '')

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

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

相关文章

RHEL/CentOS的firewalld防火墙服务配置

从 RHEL/CentOS 7开始&#xff0c;使用新的防火墙服务——firewalld。这里介绍该防火墙服务的基本用法 一、防火墙服务管理&#xff1a;从 RHEL/CentOS 7开始采用Systemd作为新的系统管理器&#xff0c;而systemctl则是Systemd中用于管理服务的命令 # 启动防火墙服务 systemct…

谷歌Gemini刚发就惹质疑:测试标准有失偏颇,效果视频疑似剪辑

梦晨 克雷西 发自 凹非寺 量子位 | 公众号 QbitAI 谷歌憋了许久的大招&#xff0c;双子座Gemini大模型终于发布&#xff01;其中一图一视频最引人注目&#xff1a; 一图&#xff0c;MMLU多任务语言理解数据集测试&#xff0c;Gemini Ultra不光超越GPT-4&#xff0c;甚至超越了…

OpenGL学习资料

1.学习网站 Song Ho Ahn LearnOpenGL GAMES101:现代计算机图形学入门 OpenGL 官网 2.书籍 Fundamentals of computer graphics OpenGL ES 3.0编程指南 计算机图形学(OpenGL版)第3版 3.参考的一些文章 颜色缓冲区 深度缓冲 VBO&#xff0c;VAO和EBO详解 深入探索透视投影变…

实战干货!基于ERNIE Bot SDK的数字诗人聊天开发教程

随着人工智能技术的不断迭代发展&#xff0c;数字人的开发与应用需求也与日俱增&#xff0c;并且随着大语言模型的发展&#xff0c;数字人也更智能&#xff0c;从最初的语音预制到现在的实时交流&#xff0c;目前已在很多场景都有广泛应用。 虚拟客服&#xff1a;数字人可以通…

Mysql自动备份脚本(本地备份、远程备份、删除冗余备份)

Mysql自动备份脚本&#xff08;本地备份、远程备份、删除冗余备份&#xff09; 1. 脚本功能 自动备份mysql数据到服务器上&#xff0c;可以通过linux的 crontab定义备份周期。 自动删除七天前的备份数据。 2. 脚本内容 #!/bin/bash # auth Eric source /etc/profile # 设…

【EMNLP 2023】基于知识迁移的跨语言机器阅读理解算法

近日&#xff0c;阿里云人工智能平台PAI与华南理工大学朱金辉教授团队、达摩院自然语言处理团队合作在自然语言处理顶级会议EMNLP2023上发表基于机器翻译增加的跨语言机器阅读理解算法X-STA。通过利用一个注意力机制的教师来将源语言的答案转移到目标语言的答案输出空间&#x…

计算机网络高频面试八股文

目录&#xff1a; 网络分层结构三次握手两次握手可以吗&#xff1f;四次挥手第四次挥手为什么要等待2MSL&#xff1f;为什么是四次挥手&#xff1f;TCP有哪些特点&#xff1f;说说TCP报文首部有哪些字段&#xff0c;其作用又分别是什么&#xff1f;TCP和UDP的区别&#xff1f;…

套接字应用程序

这章节是关于实现 lib_chan 库的 。 lib_chan 的代码在 TCP/IP 之上实现了一个完整的网络层&#xff0c;能够提供认证和Erlang 数据流功能。一旦理解了 lib_chan 的原理&#xff0c;就能量身定制我们自己的通信基础结构&#xff0c;并把它叠加在TCP/IP 之上了。 就lib_chan 本身…

MMLM之Gemini:《Introducing Gemini: our largest and most capable AI model》的翻译与解读

MMLM之Gemini&#xff1a;《Introducing Gemini: our largest and most capable AI model》的翻译与解读 导读&#xff1a;2023年12月6日&#xff0c;Google重磅发布大规模多模态模型Gemini&#xff0c;表示了Google语言模型发展到了一个新阶段&#xff0c;其多模态和通用能力明…

中断、异常和系统调用(2-1,2-2,2-3)

2-1 课堂练习2.1&#xff1a;外部中断 本实训分析 Linux 0.11 对外部中断的响应和处理过程。在每条指令执行的末尾&#xff0c;如果没有关中断&#xff0c;CPU 会检查是否收到了外部中断信号&#xff0c;如果有信号&#xff0c;则 CPU 就切换到核心态去执行对应的中断处理程序…

Android 获取进程名称

Android 获取进程名称 本篇文章主要获取下当前应用的进程名称,具体代码如下: public static String getProcessNameDevice(final Context context) {int myPid Process.myPid();if (context null || myPid < 0) {return "";}ActivityManager.RunningAppProces…

DHTMLX Scheduler PRO 6.0.5 Crack

功能丰富的 JavaScript调度程序 DHTMLX Scheduler 是一个 JavaScript 日程安排日历&#xff0c;具有 10 个视图和可定制的界面&#xff0c;用于开发任何类型的日程安排应用程序。 DHTMLX JS 调度程序库的主要特性 我们的 JS 调度程序最需要的功能之一是时间轴视图。借助时间轴…

vue-loader是如何工作的?

什么是单文件组件&#xff1f; 单文件组件是一种将模板、脚本和样式封装在一个 .vue 文件中的方式 例如&#xff1a; <template><div class"example">{{ msg }}</div> </template> <script>export default {data() {return {msg: &qu…

【语义分割数据集】——imagenet语义分割

地址&#xff1a;https://github.com/LUSSeg/ImageNet-S 1 例图 2. 类别和数量信息 疑问 根据原文的描述&#xff1a;Based on the ImageNet dataset, we propose the ImageNet-S dataset with 1.2 million training images and 50k high-quality semantic segmentation annot…

【JNPF】好用、高性价比的低代码开发平台

目录 1.JNPF介绍 突出优势 2.JNPF的开放性与扩展性 平台的开放性&#xff1a; 平台高拓展性 在快速发展的软件开发领域&#xff0c;低代码平台已经成为了一种重要的开发方法&#xff0c;它使非专业开发人员也能够参与到软件开发中去&#xff0c;大大加速了软件开发的效率。…

2023年总结和2024年展望(以ue为主攻)

2023年就要过去了&#xff0c;总结下&#xff1a; 先说好的地方 1&#xff0c;pbr材质集成到了osg中&#xff0c;加上直接光和间接光。终于知道pbr咋回事了。光线追踪的视频也跟着敲了一个。 2&#xff0c;得到了认可。拿到了半年奖&#xff0c;leader让我明年和架构师一起进行…

Leetcode—2034.股票价格波动【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—2034.股票价格波动 算法思想 实现代码 class StockPrice { public:int last 0;multiset<int> total;unordered_map<int, int> m;StockPrice() {}void update(int timestamp, int price) {if(m.count(time…

VUE学习一、环境的安装

1.node.js安装 node.js是前端依赖的环境, 类似于java中的jdk 下载地址 node.js 下载 msi文件 下完就是一顿嘎嘎安装 , 安装后可以cmd看看node和npm的版本 1.2 yarn的安装 Yarn是Facebook最近发布的一款依赖包安装工具。Yarn是一个新的快速安全可信赖的可以替代NPM的依赖管…

计算机图形学——消隐算法

目录 消隐算法 &#xff08;1&#xff09;隐藏线消除算法 &#xff08;2&#xff09;隐藏面消除算法 曲面体消隐算法 3D Mesh 隐藏面消除算法 &#xff08;1&#xff09;深度缓冲器算法&#xff08;zBuffer&#xff09; 深度缓冲器 &#xff08;2&#xff09;深度排序…

SpringBoot的监控(Actuator) 功能

目录 0、官方文档 一、引入依赖 二、application.yml文件中开启监控 三、具体使用 四、具体细节使用 五、端点开启与禁用 六、定制Endpoint 1. 定制 /actuator/health 2. 定制 /actuator/info &#xff08;1&#xff09;直接在配置文件中写死 &#xff08;2&#xff…