记录使用ElementUI遇到的坑

刚转PC前端，刚用上elementUI，已经遇到诸多问题了，真没之前移动端用的vant好，记录一下遇到的坑
版本：2.13.0
框架： Vue2

场景一：Popup弹框子组件，里面是表单,数据是props接收的父组件的值，在子组件中深拷贝了一份，用到了下拉框和单选组件，这两个值改变都会有联动处理，是用@change绑定的联动处理事件，但是事件不会立即生效，只有下一个数据改变时才会变化。

解决：在change事件中加上this.$forceUpdate();

解释： 在编辑数据时，使用v-model绑定 el-select多选，但无法进行编辑、删除，这是因为由于一些嵌套特别深的数据，导致数据更新了，但是页面却没有重新渲染需要使用this.$forceUpdate()迫使 Vue 实例重新渲染。

场景二：同场景一，有一个input初始时没显示，用v-if控制的，在某些条件下会显示，这种情况下，input的校验不起作用。

解决：
方法1. 改用 v-show, 但是v-show隐藏以后数据的值还在，需要手动处理
方法2: 在外层套一个div， 但是样式会受影响，需要手动处理
方法3: 让它初始时先挂载上，再在挂载后（我是在watch里做的）将它隐藏掉。
虽然我用方法3解决了这个问题，但是又引发了另外一个问题。。。见场景三

场景三：隐藏掉input时，它的校验文字没有被隐藏

解决： 在隐藏input之前，手动隐藏校验文字

this.$refs.form.clearValidate('discountValueStr');
this.$set(this.detailData, 'discountValueStr', '');

追加
用emelentUI Form表单组件的几点注意事项：
1.表单中的所有要校验字段必须在data中初始化声明出来，以为Vue组件在加载时，会对data里的所有属性做依赖收集，不能写空对象，如果写个空对象，后续添加新属性要用this.$set添加。 如果在mounted或者watch里(页面加载前)，初始化了data数据，这里也要注意把每个字段都写出来

this.detailData = {  // 要这样写
        bgndate: null,
        calmethod: "打折",
        calmethodenum: 0,
        createdguid: null,
        createdname: null,
        createdtime: null,
        discountTypeCode: null,
        discountValueStr: "",
        discountdetailname: "",
        discountplanguid: null,
        discountvlue: null,
        discounttype: "",
      };
      
this.detailData = {};  // 不能这么写

2.clearValidate()用在trigger=change的字段上时需要把clearValidate()写在nexttick里。总之要保证在调用完clearValidate()后不再有逻辑改变model里的值

3.用trigger=change事件监听变化的字段，在初始化赋值时，如果赋值了整个对象，会触发这个字段的校验，所以需要一个字段一个字段的赋值

else {
          // 编辑
          //不能这么赋值：this.detailData = JSON.parse(JSON.stringify(this.rowData)); 
          
          //要这样赋值 ⬇️
          this.detailData.discounttype = this.rowData.discounttype;
          this.detailData.discountdetailname = this.rowData.discountdetailname;
          this.detailData.calmethod = this.rowData.calmethod;
          this.detailData.calmethodenum = this.rowData.calmethodenum;
          this.detailData.xRoomtotalrate = this.rowData.xRoomtotalrate;
          this.$nextTick(() => {
            this.$refs.detailForm.clearValidate();
          })
        }

追加：
用el-table， 当有列固定时，则不能把所有列都设置上宽度，否则会出现一个空列头，也就是列头会多一条线，如图需要把左边的宽去掉，改成右边的

这是错误样式图

补充：

1. el-tabs里面的:before-leave 和 tab-click不是互斥的，也就是说不管before-leave里有没有拦截，tab-click都会执行

leaveTab(activeName, oldActiveName) {
  // 切换tab时切换路由
  console.log('leaveTab')
  return false
},
tabClick() {
  console.log('tabClick')
}
// 输出： 
// leaveTab
// tabClick