前端常用utils方法持续更新中

1.数字太长截断显示

在data上方定义一个filter 在template中{{value | ellipsis}}

  filters: {ellipsis(value) {if (!value) return ''if (value.length > 8) {return value.slice(0, 8) + '...'}return value}},

2.根据数据值动态更改表格样式

:cell-style=“changeCellStyle” 利用column上的label,以及property, row[column.property]拿到单元格数值、

 <template><el-tablefit:header-cell-style="getRowClass":cell-style="changeCellStyle"height="350":data="analysistabledata"style="width: 100%"><el-table-columnv-for="i in analysistabledatacolumn":key="i.key"show-overflow-tooltip:prop="i[0]":label="i[1]"width="86"></el-table-column></el-table>
</template>
  changeCellStyle({ row, column, rowIndex, columnIndex }) {if (column.label === '') {column.width = 120return 'text-align:left;'}if (column.property !== 'name' &&column.property !== 'yesterday' &&column.property !== 'mtd' &&column.label !== '') {let textcolor = '#26A872'if (row[column.property] !== null &&row[column.property].includes('%') &&row[column.property].includes('-')) {textcolor = '#ea4025'return `color:${textcolor};text-align:right;`}return `color:${textcolor};text-align:right;`}return 'text-align:right;'},

3.dayjs库 处理日期

import dayjs from 'dayjs'// 获取昨天日期
export function getYesterday() {const yesterday = dayjs().subtract(1, 'day')const formatYesterday = dayjs(yesterday).format('YYYY-MM-DD')return formatYesterday
}
// 获取上个月第一天日期
export function getLasterMonthFirstDay() {const LasterMonthDay = dayjs().subtract(1, 'month')const lastermonthfirstday = dayjs(LasterMonthDay).startOf('M')const formatlastermonthday = dayjs(lastermonthfirstday).format('YYYY-MM-DD')return formatlastermonthday
}// 获取今天日期
export function getTodayFormat() {return dayjs().format('YYYY-MM-DD')
}// 是否是15号之后
export function isAfterFifteenDay() {return dayjs().date() > 15
}

4.数字处理

// 将数字以万为单位保留一位小数
export function formateThousand(num:number) {num = Number(num)if (!num) return '--'if (num === 0) {return `${num}`} if (num > 1 && num < 10000) {return `${num}`}return `${(num / 10000).toFixed(1)}`
}export function addPrecent(num:number) {num = Number(num)if (!num) return '--'return `${(num)}%`
}

5.利用set做去重

      const keyList = new Set()this.data.nodeList.forEach(item => {keyList.add(item.monitorKey)// 用add增加数据})console.log(keyList.size - 1)//长度使用size而非length

6.对象数组根据某个key值去重

/*
arr:对象数组
uniId :某个key
*/uniqueObjArr(arr, uniId) {const res = new Map()return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1))},

7.随机数生成

/* 生成随机数 */curDateTime() {var d = new Date()var year = d.getFullYear() + ''var month = d.getMonth() + 1var date = d.getDate()var day = d.getDay()var Hours = d.getHours() // 获取当前小时数(0-23)var Minutes = d.getMinutes() // 获取当前分钟数(0-59)var Seconds = d.getSeconds() // 获取当前秒数(0-59)var curDateTime = yearif (month > 9) {curDateTime = curDateTime + month} else {curDateTime = curDateTime + '0' + month}if (date > 9) { curDateTime = curDateTime + date } else { curDateTime = curDateTime + '0' + date }if (Hours > 9) { curDateTime = curDateTime + Hours } else { curDateTime = curDateTime + '0' + Hours }if (Minutes > 9) { curDateTime = curDateTime + Minutes } else { curDateTime = curDateTime + '0' + Minutes }if (Seconds > 9) { curDateTime = curDateTime + Seconds } else { curDateTime = curDateTime + '0' + Seconds }return curDateTime},RndNum(n) {var rnd = ''for (var i = 0; i < n; i++) {rnd += Math.floor(Math.random() * 10)}return rnd},// 输出指定位数的随机数的随机整数getTimeAndRandom() {return this.curDateTime() + this.RndNum(4)},

8.大数相加

  /*** js 实现一个函数,完成超过范围的两个大整数相加功能* @param {*} number1* @param {*} number2*/bigNumberAdd(number1,number2) {// startlet result = '' // 保存最后结果let carry = false // 保留进位结果// 将字符串转换为数组number1 = number1.split('')number2 = number2.split('')// 当数组的长度都变为0,并且最终不再进位时,结束循环while (number1.length || number2.length || carry) {// 每次将最后的数字进行相加,使用~~的好处是,即使返回值为 undefined 也能转换为 0carry += ~~number1.pop() + ~~number2.pop()// 取加法结果的个位加入最终结果result = carry % 10 + result// 判断是否需要进位,true 和 false 的值在加法中会被转换为 1 和 0carry = carry > 9}// 返回最终结果return result},

9.向url中添加参数

/*** Add the object as a parameter to the URL* @param baseUrl url* @param obj* @returns {string}* eg:*  let obj = {a: '3', b: '4'}*  setObjToUrlParams('www.baidu.com', obj)*  ==>www.baidu.com?a=3&b=4*/export function setObjToUrlParams1(baseURL:string, obj:any):string {let parameters = '';for(const key in obj) {parameters +=key + '=' + encodeURIComponent(obj[key]) + '&';}return /\?$/.test(baseURL) ? baseURL + parameters : baseURL.replace(/\/?$/, '?') + parameters;
}
// 1. /\?$/:这个正则表达式用于检查 baseURL 是否以问号(?)结尾。其中,\? 表示问号,$ 表示字符串的末尾。所以,/\?$/ 匹配以问号结尾的字符串。// 2. /\/?$/:这个正则表达式用于在 baseURL 的末尾添加一个问号。其中,\/ 表示斜线,? 表示前面的字符(这里是斜线)可以出现也可以不出现,$ 表示字符串的末尾。所以,/\/?$/ 匹配以斜线或无字符结尾的字符串。在这个正则表达式中,replace 函数将匹配的部分(无论是斜线还是无字符)替换为问号。

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

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

相关文章

RHCSA --- Linux存储管理

存储管理 Boot&#xff1a;可引导操作系统的分区&#xff08;必须是主分区&#xff09; 分区 ll /dev/nvme0n* 表示的是 nvme接口的磁盘 0n1 1 0n2 2 0n3 3 brw-rw----. 1 root disk 259, 0 Nov 15 19:31 /dev/nvme0n1 磁盘1 brw-rw----. 1 ro…

【Linux】Makefile

一、gcc 的缺点 gcc -o test a.c b.c我们具体分析&#xff1a;gcc -o test a.c b.c这条命令 它们要经过下面几个步骤&#xff1a; 1&#xff09;对于a.c&#xff1a;执行&#xff1a;预处理 编译 汇编 的过程&#xff0c;a.c >xxx.s >xxx.o 文件。2&#xff09;对于b.c…

算法必刷系列之位运算

位运算 位运算既能在某些条件下提升运算速度&#xff0c;又能在某些条件下节省运算内存。计算机底层涉及大量位运算&#xff0c;位运算可以替代加加减乘除。位运算的基本运算单元是bit&#xff0c;相比于整数的int占据四个字节&#xff0c;大量节约运算空间&#xff0c;适用于…

算法之冒泡排序

算法之冒泡排序 冒泡排序Bubble Sort 交换排序相邻元素两两比较大小&#xff0c;有必要则交换。元素越小或越大&#xff0c;就会在数列中慢慢的交换并“浮”向顶端&#xff0c;如同水泡咕嘟咕嘟往上冒。 核心算法 排序算法&#xff0c;一般都实现为就地排序&#xff0c;输出…

ESP32网络开发实例-物联网声污染监测系统

物联网声污染监测系统 文章目录 物联网声污染监测系统1、KY-038 声音传感器模块2、软件准备3、硬件准备4、代码实现在本文中,我们将使用 ESP32、声音模块和 Blynk 应用程序创建一个基于物联网的声音污染监测系统。 我们将使用 KY-038 麦克风传感器以分贝为单位检测声音并在 OL…

vscode c++ 报错identifier “string“ is undefined

vscode c 报identifier “string” is undefined 问题 新装了电脑, 装好vsc和g等, 发现报错 但开头并没问题 解决 shiftctrlp选择 C/C Edit:COnfigurations (JSON)自动生成打开 c_cpp_properties.json添加g路径等 "cStandard": "c11","cppStanda…

【数据结构(二)】单链表(3)

文章目录 1. 链表介绍2. 单链表应用实例2.1. 顺序添加方式2.1.1. 思路分析2.1.2. 代码实现 2.2. 按照编号顺序添加方式2.2.1. 思路分析2.2.2. 代码实现 3. 单链表节点的修改3.1. 思路分析3.2. 代码实现 4. 单链表节点的删除4.1. 思路分析4.2. 代码实现 5. 单链表常见面试题5.1.…

Universal adversarial perturbations(2017 CVPR)

Universal adversarial perturbations----《普遍对抗扰动》 通俗UAP算法步骤理解&#xff1a;对于 x i ∈ X {x_i} \in X xi​∈X 的每个采样数据点&#xff0c;比较 k ^ ( x i v ) \hat k({x_i} v) k^(xi​v) 与 k ^ ( x i ) \hat k({x_i}) k^(xi​) &#xff0c;如果 k…

JAVA工具类匹配重复或者连续的字符和符号

import java.util.ArrayList; import java.util.List;public class StringChecker {static String SYMBOLS "~!#$%^&*()_{}|<>?,./";static List<String> symbolSubstrings splitStringIntoSubstrings(SYMBOLS, 3);/*** 检查字符串是否包含重复或…

Rust与其他语言对比:优势在哪里?

大家好&#xff01;我是lincyang。 今天&#xff0c;我们将深入探讨Rust语言与其他编程语言比较的优势&#xff0c;并通过具体的代码示例和性能数据来加深理解。 Rust与其他语言的比较 1. 内存安全性 Rust&#xff1a;采用所有权系统&#xff0c;编译器在编译时检查内存安全…

西南科技大学814考研二

C语言数据结构与算法 线性表 顺序表(静态分配内存) #include <stdio.h> #include <stdbool.h> //静态顺序表 #define MAX_SIZE 8 //顺序表储存的数据类型 typedef int ElemType; typedef struct {ElemType data[MAX_SIZE];int length; }SeqList; //初始化顺序表…

redis 非关系型数据库

redis 非关系型数据库&#xff0c;缓存型数据库。 关系型数据库和非关系型数据库的区别 关系型数据库是一个机构化的数据库&#xff0c;行和列。 列&#xff1a;声明对象 行&#xff1a;记录对象属性。 表与表之间是有关联&#xff0c;使用sql语句&#xff0c;来对指定的表…

Oracle 存储过程数据插入临时表慢以及SQL语句查询慢

/*parallel*/ 解释: 一般表数据量比较大&#xff08;超过100万&#xff09;时&#xff0c;可以使用parallel强制启动并行度来提升查询速度 用法&#xff1a;/*parallel(table_short_name,cash_number)*/ 可以加到insert、delete、update、select的后面来使用 比如&#xff…

Linux:安装MySQL服务(非docker方式)

1、下载安装包 下载MySQL安装包&#xff0c;需要Oracle官网的账号 下面是网友提供的账号及密码&#xff0c;亲测有效。 账户&#xff1a;3028064308qq.com 我用的这个&#xff0c;可以登陆 密码&#xff1a;OraclePassword123!Oracle Account: 602205528qq.com Oracle Pass…

计算机毕业设计选题推荐-掌心办公微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

根据表名动态获取数据

查询接口 ApiOperation("通用高级搜索")PostMapping("/highSearch")public ResponseResult highSearch(RequestBody HighSearchVO highSearchVO) {return dynamicDataRetrievalService.highSearch(highSearchVO);} Service OverrideTransactionalpublic R…

list转map(根据某个或多个属性分组)

需要将对应的list换成本地list&#xff0c;和对象换成本地对象 1、List转Map<String,List> // 根据一个字段分组 Map<String, List<String>> map objectLists.stream().collect(Collectors.groupingBy(Object::getName,Collectors.mapping(Object::getId, …

【小技巧】MyBatis 中 SQL 写法技巧小总结

最近有个兄弟在搞mybatis&#xff0c;问我怎么写sql &#xff0c;说简单一点mybatis就是写原生sql&#xff0c;官方都说了 mybatis 的动态sql语句是基于 OGNL表达式的。可以方便的在 sql 语句中实现某些逻辑. 总体说来mybatis 动态SQL 语句主要有以下几类: if 语句 (简单的条件…

r语言plot函数

R语言中的plot()函数是一个用于创建各种类型的图形的基本绘图函数。它可以用来绘制散点图、线图、直方图、箱线图、饼图等多种图形。以下是plot()函数的基本语法和一些示例用法&#xff1a; 基本语法: plot(x, y, type "p", ...) 参数说明: x: 用于绘图的x轴数据&a…

分形简单版

我的代码&#xff1a; #include<bits/stdc.h> using namespace std; const int N1000; int n; char s[N][N]; void work(int x) {if(x1) {s[0][0]*;return;}work(x-1);for(int i0;i<(1<<x-2);i)for(int j(1<<x-2);j<(1<<x-1);j) s[i][j]s[i][j-(…