关于element Ui 时间组件的几种应用情况整理

 ☆ 禁止选今天之前的时间

<el-date-picker v-model="dataForm.endTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
            placeholder="选择结束时间">
</el-date-picker>
   data里面 ：
     pickerOptions: { // 限制优惠券开始结束时间不让选择今天以前的
    disabledDate (time) {
      return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
    }
  },
  
  ☆ 禁止选择今天以后的时间           
  <el-date-picker
      v-model="signTime"
      type="datetimerange"
      @change="dateChange"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']"
      :picker-options="pickerOptions0">
    </el-date-picker>
    
    data里面：
          pickerOptions0: {
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }],
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },

控制el-image在dialog中平铺大小

在el-image中增加 class="img-box"   

在页面的最后增加：

<style> .el-image__inner{ padding: 0 5%; width:90%; height: auto; } </style>

 

关于上面这个时间组件区间选择，选择今天无法确定：

原因：在选择今天时，获取的时间不是今天的new Data而是今天的最后时间（23:59:59）

解决办法（更改上方 disabledDate方法）：

 

弹框右上角×号，点击提示并且刷新列表：

:before-close="handleClose"  (绑定点击事件)

事件处理

  this.$confirm('是否确认关闭？')
    .then(_ => {
      this.getDataList()
      done()
    })
    .catch(_ => {})
},