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 函数将匹配的部分(无论是斜线还是无字符)替换为问号。