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.hqwc.cn/news/255488.html

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

相关文章

设备制造行业CRM:提升客户满意度,驱动业务增长

设备制造行业客户需求多样化、服务链路长&#xff0c;企业在关注APS、EMS等工业软件之余还要以客户为中心&#xff0c;做好客户服务。设备制造行业CRM管理系统是企业管理客户关系的利器&#xff0c;设备制造行业CRM的作用有哪些&#xff1f;一文带您看懂。 设备制造行业需要解…

去哪儿如何实现故障率降低 65%?技术 + 管理的数字化度量体系实践

一分钟精华速览 如何全面把握系统现状&#xff0c;以便在关键时刻做出明智的决策&#xff1f;这是很多负责全局稳定性的管理者深感关切的问题。基于这一背景&#xff0c;同时也为了寻求提升研发工作效率提升&#xff0c;去哪儿网构建了一套数字化质量度量体系&#xff0c;以此…

五年制专转本‖成功上岸同学的共同特质

转本是一项需要长时间坚持与勤奋的过程。成功完成本科学业的同学们都具备着一些共同特质&#xff0c;下面我们来一一探索。 第一&#xff0c;目标清晰明确是成功的第一步。同学们要对自己的未来进行规划。如果打算直接就业&#xff0c;就需要努力培养专业技能。如果打算转本&a…

C语言内存函数讲解

目录 文章目录 内存函数针对的数据类型不确定可能是整型数据&#xff0c;字符数据&#xff0c;结构体数据...... memcpy的使用和模拟实现 memcpy的使用 memcpy打印字符数据 memcpy打印整型数据 memcpy的模拟实现 模拟实现的memcpy打印重叠情境 memmove的使用和模拟实现 memm…

VR远程带看,助力线下门店线上化转型“自救”

VR远程带看&#xff0c;因自身高效的沉浸式在线沟通功能&#xff0c;逐渐走进了大众的视野。身临其境的线上漫游体验以及实时同屏互联的新型交互模式&#xff0c;提升了商家同用户之间的沟通效率&#xff0c;进一步实现了远程线上一对一、一对多的同屏带看&#xff0c;用户足不…

K8S pod无损上下线

在最近的K8s服务上线过程中&#xff0c;我发现了一些问题&#xff0c;更具体的说&#xff0c;我在使用阿里云k8s的过程中注意到&#xff1a;会出现slb短时RT增加&#xff0c;Pod部署初期就达到了扩容上限&#xff0c;并且开始大量的扩容&#xff0c;这无疑占用了大量的k8s资源。…

【LeetCode】2629. 复合函数

复合函数 题目题解 题目 请你编写一个函数&#xff0c;它接收一个函数数组 [f1, f2, f3&#xff0c;…&#xff0c; fn] &#xff0c;并返回一个新的函数 fn &#xff0c;它是函数数组的 复合函数 。 [f(x)&#xff0c; g(x)&#xff0c; h(x)] 的 复合函数 为 fn(x) f(g(h(x…

HTTP 缓存机制

一、强制缓存 只要浏览器判断缓存没有过期&#xff0c;则直接使用浏览器的本地缓存而无需再请求服务器。 强制缓存是利用下面这两个 HTTP 响应头部&#xff08;Response Header&#xff09;字段实现的&#xff0c;它们都用来表示资源在客户端缓存的有效期&#xff1a; Cache…

六个自媒体写作方法,提升自媒体创作收益

在自媒体时代&#xff0c;写作成为了一个不可或缺的技能。特别是对于新手来说&#xff0c;掌握一些有效的写作方法&#xff0c;可以事半功倍&#xff0c;更好地展现个人创意和观点。在这里&#xff0c;我将分享六个适合新手的自媒体写作方法&#xff0c;希望能够为你在写作之路…

肾虚的16个表现,你有吗?

现代研究发现&#xff1a;导致人体衰老的根本原因不是年龄&#xff0c;而是“肾虚”。此外&#xff0c;肾虚不是男人的专利&#xff0c;女人肾虚的危害更大。 一、肾虚的16个表现 1、总感觉口咸 我们的五味&#xff08;酸苦甘辛咸&#xff09;跟我们的脏腑是相对应的&#xf…

基于jsp+servlet的在线考试系统

基于jspservlet的在线考试系统, 演示地址:英语在线考试系统考生测试账号:用户名:stu,密码:stu,管理员测试账号用户名:admin,密码:admin &#xff08;源码里包含数据库文件&#xff09; 本系统分为两个角色&#xff0c;一个时考生&#xff0c;一个是管理员&#xff0c;考生可…

马来西亚虾皮选品工具:如何优化您的电商业务

随着电子商务的快速发展&#xff0c;越来越多的商家开始将目光投向在线市场。在马来西亚&#xff0c;虾皮&#xff08;Shopee&#xff09;平台成为了一个备受瞩目的电商平台&#xff0c;吸引了大量的商家和消费者。然而&#xff0c;要在这个竞争激烈的市场中脱颖而出并取得成功…