使用vue2和element-ui遇到的坑

一、日期选择组件，禁用今天之前的日期

<el-date-picker
        v-model="item.courseData"
        type="date"
        placeholder="选择日期" style="max-width: 135px"
        :picker-options="disableTime"
/>
 disableTime: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 3600 * 1000 * 24
     }
} // 写在data

二、隐藏table组件全选框

<el-table
        class="table"
        :header-cell-class-name="cellClass"
 />

拿到表头全选框选择器

 cellClass (row) {
        return 'DisableSelection'
    },

.table::v-deep .DisableSelection > .cell {
  display: none !important;
}

注意：v-show不能控制element-ui的table-colume的显示隐藏，v-if不能动态控制element-ui的table-colume的显示隐藏

三、嵌套使用dialog组件

最近做项目时踩的一个坑，在pop组件嵌套使用dialog组件，显示时遮罩层在弹窗之上
解决：在dialog加上

:append-to-body='true'

原因：因为dialog的组件外层div设置了position：absolute属性导致遮罩层会在最上面，将dialog插入到body下就不存在这种问题了

四、元素显示隐藏切换

刚进公司的时候，喜欢用true和false来控制条件下隐藏显示的切换，被领导批了一顿，好在他告诉了我正确的控制方法
可以使用数字或字符串来代表不同的条件，从而控制不同条件下的状态
例：

<el-button plain @click="chooseType(0)">直播课</el-button>
<el-button plain @click="chooseType(1)">录播课</el-button>
<span v-show="classType!==0">更多</span> 
<!--为 1 时显示更多-->

// data
classType: 0, // 0:直播课；1:录播课

// methods
chooseType (p) {
      this.classType = p
      console.log(this.classType)
    }

是不是很机智，并且规范，这样即使再多出一个类型也只需要再加上一个数字和一个判断而已

五、table表格的坑

在写table时要想显示border必须在table上加border=1,否则边框不显示

合并边框

border-collapse: collapse;