使用vue2和element-ui遇到的坑

2021-04-26  本文已影响0人  二荣xxx

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

<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;
上一篇下一篇

猜你喜欢

热点阅读