工作笔记small tips

…持续更新

1：双问号运算符

类似于 || 运算符
只有当??前面的数据为undifined或者null时，取问号后面的数据
例：

说在前面：
    关于JS的数据类型之一undifined：
         1）未初始化的变量（尚未初始化赋值的变量默认为**undifined**）
         2）不存在的对象属性
         3）不存在的数组元素
    都将返回undifined

let a  // undifined（情况1）
// ??的使用
a ?? 'default'  // 输出：'defalut'
null ?? 'default'  // 输出：'default'
"" ?? 'default' // 输出 “”
// || 的使用
a || 'default'  // 输出：'defalut'
null || 'default'  // 输出：'default'
"" || 'default' // 输出 ‘default’

2：可选链操作符 ？

• 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短，更简明

• 在引用为空( null ) 或者undifined时不会引起错误，该表达式将会短路计算直接返回undefined，即使用 ?. 取代 . ,javascript会在尝试访问 ? 后面的属性前，先隐式检查前面饿引用既不是nul或undifined,如果是的话将会短路计算直接返回undifined

3:vue模板中的数据没有实时更新

1）知识点：

     当一个Vue实例被创建时，会将data对象中的所有property加入到Vue的**响应式系统**中，及当这些可响应的property的值发生变化的时候，视图将会产生响应更新为最新的值

故在某些页面的事件中手动给data中的某一对象添加属性和对应属性值时，视图无法实时更新
如：

data: {
  person：{}
}
methods: {
fun1(){
  person.age = 18
}
fun2() {
  person.age = 20
}
// 视图无法实时更新age的值
}

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value)方法向嵌套对象添加响应式 property
实际项目中的应用:

data(){
	return {
	   // 无法明确对象中的属性
		houseCountMap: { [key: number]: { count: number; success: boolean } } = {}
	}
}
created() {
// 调接口获取可确定的属性名，用set方法设置为响应式
	const totalJtbsmArr = buyerJtbsmArr.concat(sellerJtbsmArr)
    totalJtbsmArr.forEach((e) => {
      Vue.set(this.houseCountMap, e, { count: 0, success: false })
    })
}
methods() {
	async getFwtc() {
	// 一些异步方法
	 Vue.set(this.houseCountMap[jtbsm], 'count', response.data)
	}
}

4:关于滚动条的一些业务操作

说在前面：

• 关于offsetTop：获取的是该dom元素距离自己第一个有定位样式(position: relative/absolute/fixed)的父级元素(offsetParent)顶部的距离

• 关于scrollTop：滚动条滚动的高度(注意：可读可写哦！！)

1）滚动条滚动时，定位按钮隐藏

//由于没有点击事件触发获取滚动的高度，故在mounted中对滚动事件进行了监听
mounted(）{
  window.addEventListener('scroll', this.handleScroll, true)
}

// 这个函数要做个截流操作，要不然一直会被触发---->截流后续笔记补充
handleScroll() {
  // 会返回指定的calss属性值返回相关元素的集合(节点列表)
  const buttonEle = document.getElementByClassName('locate-row')
  this.buttonShow = buttonEle[0].scrollTop === 0 ? true : false
}

2）点击字母列表，以这些字母开头列表滚动到点击字母的位置

这里有点击事件，无需手动添加滚动条的监听器

// 这里的data-first-letter赋值操作有点迷我也知道，嗨，等我知道了原因再来解释吧。反正这么用可以
<template>
	<div  v-if='node.level === 1'  :data-first-letter="data.data.enumname[0]">
	     {{node.label}}
	</div>
</template>

<script>
methods() {val
	letterClick(val) {
	const el = this.$el.querySelector(`[data-first-letter="${val}"]`)
	// 上一层的offsetParent
	let parentDom = document.getElementById('el-tree')
	const toTop = el.offsetTop
    parentDom.scrollTop = toTop
	}
}
</script>

5：删除Dom元素

1) 删除子节点

var child=document.getElementById("childDom");
child.parentNode.removeChild(child);

2 ) 删除自身

var dom=document.getElementById("dom");
dom.remove();

6：vue中的transition标签

说在前面：
在进入/离开的过度中，会有6个class进行切换：

1. v-enter:定义进入过度的开始状态。在元素被插入前生效，元素被插入之后的下一帧移除
2. v-enter-active:定义进入过渡生效时的状态。在整个过渡的阶段中应用，在元素被插入之前生效，在过度、动画完成之后删除。（这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数）
3. v-enter-to：2.1.8版以上定义进入过渡的结束状态。在元素被插入之后的下一帧生效(与此同时，v-enter被移除)，在过渡动画完成之后移除
4. v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除
5. v-leave-active:定义过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡、动画完成之后移除。这个类可被用来定义离开过渡的过程时间，延迟和曲线函数
6. v-leave-to:2.1.8版本及以上定义离开过渡的结束状态。在离开过渡被触发下一帧生效（与此同时v-leave被删除），在过渡、动画完成之后移除
   故。常见案例为：

// 过程：规定了以什么动作/姿态进行过渡
.v-enter-active, .v-leave-active {
  transition: opacity 2s ease
}
// 告知过渡的起点和终点，知道动作从什么而来，最终要变成什么
.v-enter, .v-leave-to {
   opacity: 0
}

7：工作笔记：缓慢上升出现，缓慢下降消失

<template>
	<transition name="fade">
	.....
	</template>
</template>
/* 进入过渡状态中和离开过度状态中的动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active,
.fade-leave-active {
  transition: all 2s ease;
}
.fade-enter, .fade-leave-to/* .fade-leave-active below version 2.1.8 */ {
  /* 准备进入和离开结束时的动画 */
  /* 可以设置不同的进入和离开动画 */
  transform: translateY(200px);
}

8：el-table出现 循环嵌套 且 存在合并行 的操作时进行按大列设置不同样式

1：el-table中加入 :cell-style=“columnStyle”
2：具体实现方法：

  // rowspan大于1的当前行:如图层 1 
  hasRecordRow: any[] = []
  // 被rowspan大于1影响到的行（需特殊处理的列）：如图 层1 影响到的下面两行
  needChangeColumnIndexArr: any[] = []
  
  columnStyle({ row, column, rowIndex, columnIndex }) {
    if (columnIndex < 1) {
      if (this.needChangeColumnIndexArr.indexOf(rowIndex) > -1) {
      } else {
        return
      }
    }
    var bigColumnIndex, isLast, isFirst, columnInView

    // 记录因为合并需要处理的行下标；
    if (row[0].rowspan !== 1 && this.hasRecordRow.indexOf(rowIndex) < 0) {
      this.hasRecordRow.push(rowIndex)
      for (var i = rowIndex + 1; i < rowIndex + row[0].rowspan; i++) {
        this.needChangeColumnIndexArr.push(i)
      }
    }
    if (this.needChangeColumnIndexArr.indexOf(rowIndex) > -1) {
      columnInView = columnIndex + 1
    } else {
      columnInView = columnIndex
    }

    // 找到归属于单元
    this.dyList.forEach((e) => {
      if (e.list.indexOf(columnInView) > -1) {
        bigColumnIndex = parseInt(e.name)
        isLast = e.list[e.list.length - 1] === columnInView ? true : false
      }
    })

    // 进行染色
    var isWhite = Number.isInteger(bigColumnIndex / 2)
    return isWhite ? 'background: #fff' : 'background: #F5F5F5'
  }