23年2月工作笔记整理（前端）

这个月有点忙，不是在修bug就是在赶需求，埋头加班，学到的东西也不太多。等考完高级软考之后我打算开始刷刷算法题，觉得自己在这方面还比较薄弱，虽然前端用到的算法也不多。

一、原理算法

1.多层响应式赋值，之前写过一层的，现在写一个多层的递归

 const f = list =>
          list.map(item => {
            if (item.roleMenuList && item.roleMenuList.length > 0) {
              return {
               //展开属性
                ...item,
               //添加响应式属性
                indeterminate: false,
               //递归调用
                roleMenuList: f(item.roleMenuList)
              }
            } else {
              return {
              //展开属性
                ...item,
               //递归调用
                indeterminate: false
              }
            }
         })
     //调用方法
     this.treeData = f(this.treeData)

2.路由从第二级起，每一级的路由呈现都需要一个router-view来衔接上一级的内容
3.学习栅格布局
https://blog.csdn.net/pz1021/article/details/108863522/
4.v-show和v-if的原理
https://blog.csdn.net/jiahao1186/article/details/121877912

二、业务需求代码

1.树级勾选的空选、全选、半选逻辑，之前只考虑了全选和空选，但是父级勾选需要一个中间状态去承载，就花了点时间优化了勾选。

//如果存在子集，子集全被选中，则为false，子集没有全被选中就是true
 //获取子集的数组长度
                const length = item.roleMenuList.length
                //获取子集的被选中的数组长度
                let checkedLength = 0
                item.roleMenuList.forEach(e => {
                  if (e.check || e.indeterminate) {
                    checkedLength++
                  }
                })
                if (checkedLength === 0) {
                  item.indeterminate = false
                  item.check = false
                  console.log('空选')
                } else if (checkedLength === length) {
                  item.indeterminate = false
                  item.check = true
                  console.log('全选')
                } else {
                  item.indeterminate = true
                  item.check = true
                  console.log('半选')
                }

2.过滤数据为空的子项

arr.filter(e=>{return e.value!==' '})

3.获取几天前或者几天后的时间

//获取两天前的时间
new Date().setDate(new Date().getDate()-2)

4.在当前页面滚动到指定内容，需求是为了把今天这个时间点放在居中位置

// mounted下
this.$nextTick(() => {
          setTimeout(() => {
//在对应的地方加上id='today'
            const targetbox = document.getElementById('today')
            if (targetbox) {
            //获取对应节点离顶端的高度
              const target = targetbox.offsetTop
//滚动的容器加上id='TimeLine'
              const dom = document.getElementById('TimeLine')
              //滚动置顶位置，再减去300让它稍微居中
              dom.scrollTop = target - 300
            }
          })
        })

5.获取对象里的索引值，这里是为了拿到对象内容的索引，根据索引给出不同颜色赋值，如数组的第二行一个内容的索引等于第一行最后一个内容索引+1

 let count = 0
      for (let i = 0; i < data.plantInfoList.length; i++) {//第一层
        for (let j = 0; j < data.plantInfoList[i].infos.length; j++) {//第二层
          if (i > 0) {//其他层就根据当前层的值加上前一个索引的值+1，
            data.plantInfoList[i].infos[j].order = count + j + 1
          } else {//第一层时，直接取索引
            data.plantInfoList[i].infos[j].order = j
          }
          //用count存一下前一个的索引值
          count = data.plantInfoList[i].infos[j].order
        }
      }

6.以后调接口欧的时候要捕获异常，并且打印异常