工作的日志

工作日志
（1）表格里面使用插槽，插槽内容为下拉框,值的改变应该使用@change事件改变值，原本的操作不会改变该行的值（原因：可能是层次太深，vue检测不出来）。
（2）需求中需要前一条请求先执行完后执行下一条，需要使用await使前一条先执行完，才执行下一条请求。失败不执行下一条。
（3）el-dialog中嵌套的 Dialog 必须指定append-to-body并赋值为 true。
（4）element下拉框回显出现显示value而不是label问题，原因：请求回来的value跟前端设置的value的类型不同，请求回来的数据改变后需要重新赋值。
（5）el-checkbox绑定的只是设置的label属性中的值
（6）vxe-table分组表头使用vxe-table-colgroup包裹住
（7）父子组件生命周期执行顺序：父created，子created，子mounted，父mounted
（8）搜索栏使用searchData绑定，搜索框中用绑定数组的（下拉框多选，级联选择器等），最好的方式是使用设置一个数组变量进行绑定，在搜索的时候再设置searchData字段里面的值。
（9）el-dialog作为自定义弹框使用，父组件要用v-if绑定，显示改变el-dialog绑定的值，el-dialog监听绑定的值，true调用接口，渲染数据。false设置父组件v-if的值为false，销毁组件。不然el-dialog写在created，mounted的方法不会执行
（10）el-cascader级联选择器绑定options，每一项只要有children，都可以展开，所以children为空的时候，需要处理数据，delete掉children。在@change事件中this.$refs.pHeaderCascader.$refs.panel.checkedNodePaths[0][e.length - 1 ].data可以拿到选中的对象
（11）forEach循环中，使用window.open打开多个网页，浏览器会拦截，注意看地址栏的最后
（12）在实际场景中，当上一级标签的宽度不够，又不能改变的情况下，这个时候设置height：100%，width：100%是不管用的，可以给上上一级的标签设置相对定位：position：relative，本级设置绝对定位脱离上一级标签，这时候设置height：100%，width：100%就管用了

.oldGoodsCode{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre-wrap;
  }

（13）一个编辑的页面,存在众多的数据,我们可能会使用多个接口进行保存,这时点保存按钮,调用一个方法,该方法中第一步是数据的校验,通过之后就是接口的调用

// 保存
    async handleSave () {
      try {
        // 数据校验不成功退出保存
        if (!this.oncChecked()) return
        this.btnLoading = true
        // 新增
        if (!this.currentData) {
          // 保存基本信息
          await wantToBidApi.updataBiding(obj)
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.$emit('onRefresh')
        }
        if (this.$refs.bidResult) {
          this.$confirm('是否确认已完成，一旦确认完成，将不可进行回填，请谨慎操作！', '提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '直接保存',
            cancelButtonText: '确认完成',
            type: 'warning',
            callback: async (action) => {
              if (action === 'confirm') {
                // 保存附件
                await this.saveFile()
                // 保存结果信息
                await this.saveRusult()
                // 保存基本信息
                await wantToBidApi.updataBiding(obj)
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                })
                this.$emit('onRefresh')
              } else if (action === 'cancel') {
                if (this.mainData.resultStatus === '' || !this.mainData.biddingPrice) {
                  this.$message({
                    type: 'warning',
                    message: this.mainData.resultStatus === '' ? '请选择本公司结果!' : '请选择本公司报价'
                  })
                  return
                }
                // 保存附件
                await this.saveFile()
                // 保存结果信息
                await this.saveRusult()
                // 保存基本信息
                await wantToBidApi.updataBiding(obj)
                // 完成
                await this.handleFinish()
              }
            }
          })
        }
        this.btnLoading = false
      } catch (error) {
        console.error(error)
        this.btnLoading = false
      }
    },

（14） this.$confirm的使用,通过回调函数callback的参数action 进行不同操作的判断

		this.$confirm('是否确认已完成，一旦确认完成，将不可进行回填，请谨慎操作！', '提示', {
            distinguishCancelAndClose: true,
            confirmButtonText: '直接保存',
            cancelButtonText: '确认完成',
            type: 'warning',
            callback: async (action) => {
              if (action === 'confirm') {
               	// 点确定完成
              } else if (action === 'cancel') {
                // 点直接保存
              } else if (action === 'close') {
                // 点 关闭的X
              }
            }
          })

（15） 溢出隐藏

<el-col :span="4">
     <label>状态：</label>
     <span>{{ currentOrder.statusName }}</span>
</el-col>

当span标签的内容超出了span标签的宽度,这是就需要设置溢出隐藏操作,如果直接给span标签设置溢出隐藏,当span的内容超出了span标签的宽度,就会出现,label标签的宽度设置比预想的不一样(设置170px,页面才能显示4个字的宽度)

解决方法: 1)给label设置固定宽度,span标签设置溢出隐藏
2)给el-col标签设置溢出隐藏

(16) 抗锯齿

-webkit-font-smoothing: antialiased; /*chrome、safari*/
-moz-osx-font-smoothing: grayscale;/*firefox*/

(17) 超出两行展示省略号, 水平垂直居中

<li
  v-for="(item, index) in cateList"
  :key="index"
  :class="index === currentIndex ? 'active' : ''"
  style="height: 34px;"
  @click.stop="onSelectCate(index)"
>
  <span> {{ item.catName }}</span>
</li>

li {
	display: flex;
	align-items: center;
	justify-content: center;
	&.active {
		color: #ff0000;
	}
	span {
		padding: 0 6px;
		position: relative;
		width: 100%;
		background-color: white;
		font-size: 12px;
		text-align: center;
		-webkit-box-orient: vertical; // text-align: center;要与其一起设置才会水平居中
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2; // 超过两行, 显示省略号
	}
}

(18) 隐藏原生滚动条

::-webkit-scrollbar {
 width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}