vue项目常用utils工具函数

果粒橙er

已于 2022-10-18 16:04:06 修改

阅读量1.7k

点赞数 4

分类专栏：笔记文章标签： vue.js javascript 前端

于 2022-05-17 11:49:18 首次发布

本文链接：https://blog.csdn.net/MissChengispink/article/details/124818465

版权

笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

这篇笔记总结了Vue开发中的一些实用技巧，包括遍历树形数据并删除空children，数组扁平化与去重以适应el-cascader组件，数值保留两位小数的方法，日期加法及时间戳转换为日期格式，以及递归拉平树形数据的函数。这些技巧对于提升开发效率和代码质量非常有帮助。

摘要由CSDN通过智能技术生成

个人笔记帖–持续记录

1.遍历树形数据，删除其空children项

问题：编写联级选择器时后端每层都有children，空的children也返回了，导致显示空选项
解决方案：过滤空children
解决代码：【vue】遍历树形数据，删除其空children项

2.数组扁平化+去重

场景：el-cascader级联选择器change事件的数据并不是我想要的数据，需要扁平化并且去重一下

			<el-cascader
            v-model="cascaderData"
            :options="deptOptions"
            :props="{ multiple: true,value:'deptId',label:'deptName',children:'childList' }"
            collapse-tags
            clearable
            @change="change"></el-cascader>

代码：

// methods里写方法：
getFlatRDSort(arr) {
  return Array.from(new Set(arr.flat(Infinity))).sort((a, b) => { return a - b })
}
// 在el-casher 的change事件里使用
  change(val) {
 // 此时val数据大概是这样子：[[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10]
      if (val && val.length) {
       this.cascaderData=this.getFlatRDSort(val)
      }
    },
console.log(getFlatRDSort(arr));

3.小数保留两位小数

    // 处理小数保留两位小数
    handleDecimal(val) {
      return Math.round(val * 10000) / 100.00
    }

4.日期加法+时间戳转日期

需求：输入框用户输入1传给后台的需要是1天后的数据输入n就是n天后的日期
比如当前日期是2022-09-13 用户输入5 则传给后端2022-09-18

	let num = 5 // 用户输入天数
	let time = this.formatDate(60 * 60 * 24 * num * 1000 + new Date().getTime())
	console.log(time) // 此时得到的是5天后的时间戳 需要处理成年月日格式

    // 时间戳转yyyy-mm-dd格式
    formatDate(datetime) {
      let date = new Date(datetime) //datetime时间戳为13位毫秒级别,如为10位需乘1000
      let month = ('0' + (date.getMonth() + 1)).slice(-2)	// getMonth是从1-11,所以需要加1
      let sdate = ('0' + date.getDate()).slice(-2)	// -2表示从倒数第二个元素开始截取
      let thatDate = date.getFullYear() + '-' + month + '-' + sdate + ' '
      return thatDate
    }

5.拉平树形数据

	// 递归拉平有childList的树形数据
    recursion(arr) {
      return [].concat(...arr.map(item => {
        if (item.childList) {
          let arr = [].concat(item, ...this.recursion(item.childList))
          delete item.childList
          return arr
        }
        return [].concat(item)
      }
      ))
    },