element-ui-datePicker自封装

1.针对问题：

element-ui提供的DateTimePicker、TimePicker、DatePicker 的范围选择器中，range时候所绑定的数据是数组，但是后台定义的为两个变量，网上找了很多，没有解决办法，所以自己封装一个组件，用两个datePicker封装成一个datePickerRange组件。

2.组件代码:

components/datePicker/index.vue

<template>
  <div style="display: flex;align-items: center;">
    <el-date-picker :class="{'warnQc':classname?.startclass?.warnQc,'errorQc':classname?.startclass?.errorQc}"
     v-model="startTime" :type="dateType" :format="format" :value-format="format" :placeholder="placeholder" :disabled="disabled" size="small" @change="dateStartChange" :picker-options="pickerOptionsStart">
    </el-date-picker> -
    <el-date-picker :class="{'warnQc':classname?.endclass?.warnQc,'errorQc':classname?.endclass?.errorQc}"
     v-model="endTime" :type="dateType" :format="format" :value-format="format" :placeholder="placeholder" :disabled="disabled" size="small" @change="dateEndChange" :picker-options="pickerOptionsEnd">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'datePicker',
  props: {
    dateType: {
      type: String
    },
    startDate: {
      type: String
    },
    endDate: {
      type: String
    },
    format:{
      type: String
    },
    placeholder:{
      type: String
    },
    disabled:{
      type: Boolean
    },
    classname:{
      type: Object
    },
  },
  watch: {
    startDate: {
      handler(val){
        this.startTime = val
      },
      immediate:true
    },
    endDate: {
      handler(val){
        this.endTime = val
      },
      immediate:true
    },
  },
  data() {
    return {
      startTime: '',
      endTime: '',
      pickerOptionsStart: {
        //未发生的时间禁止选择
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptionsEnd: {
        //未发生的时间禁止选择
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  methods: {
    //日期区间自定义
    dateStartChange(val) {
      this.startTime = val===null?'':val
      if (this.endTime) {
        let enactDateBeginText = new Date(this.startTime).getTime()
        let enactDateEndText = new Date(this.endTime).getTime()
        if (enactDateBeginText > enactDateEndText) {
          this.$message.error('开始时间不得大于结束时间,请重新选择!')
          this.startTime = ''
        }
      }
      this.$emit('changeStart', this.startTime)
    },
    dateEndChange(val) {
      this.endTime = val===null?'':val
      if (this.startTime) {
        let enactDateBeginText = new Date(this.startTime).getTime()
        let enactDateEndText = new Date(this.endTime).getTime()
        if (enactDateBeginText > enactDateEndText) {
          this.$message.error('结束时间不可小于开始时间,请重新选择!')
          this.endTime = ''
        }
      }
      this.$emit('changeEnd', this.endTime)
    }
  }
}
</script>

3.使用方法：

<template>
  <el-table border class="printTable" :data='tableData' :fit='true' :cell-class-name="changeCellStyle" default-expand-all>
    <el-table-column type="expand" label="展开列">
      <template #default="scope">
        <div style="display:flex;justify-content: center;align-items: center;">
          <span style="margin-right:10px;">手术起止时间:</span>
          <datePicker style="width:40%" dateType="datetime" 
            :startDate="scope.row.oprnOprtBegntime" :endDate="scope.row.oprnOprtEndtime" :format="datetimeFormat"
            @changeStart="(val) => changeTime(val,scope.row,'oprnOprtBegntime')" @changeEnd="(val) => changeTime(val,scope.row,'oprnOprtEndtime')" :disabled="disabled"
            :classname="{startclass:{'warnQc':set_warn_field('oprnOprtBegntime',scope.row.oprnOprtBegntime),'errorQc':set_error_field('oprnOprtBegntime',scope.row.oprnOprtBegntime)},
            endclass:{'warnQc':set_warn_field('oprnOprtEndtime',scope.row.oprnOprtEndtime),'errorQc':set_error_field('oprnOprtEndtime',scope.row.oprnOprtEndtime)}}"
            :placeholder="!disabled?'选择时间':'——'">
          </datePicker>
          <span style="margin-right:10px;">麻醉起止时间:</span>
          <datePicker style="width:40%" dateType="datetime"
            :startDate="scope.row.anstBegntime" :endDate="scope.row.anstEndtime" :format="datetimeFormat"
            @changeStart="(val) => changeTime(val,scope.row,'anstBegntime')" @changeEnd="(val) => changeTime(val,scope.row,'anstEndtime')" :disabled="disabled"
            :classname="{startclass:{'warnQc':set_warn_field('anstBegntime',scope.row.anstBegntime),'errorQc':set_error_field('anstBegntime',scope.row.anstBegntime)},
            endclass:{'warnQc':set_warn_field('anstEndtime',scope.row.anstEndtime),'errorQc':set_error_field('anstEndtime',scope.row.anstEndtime)}}"
            :placeholder="!disabled?'选择时间':'——'" >
          </datePicker>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
data() {
    return {
      datetimeFormat:'yyyy-MM-dd HH:mm:ss',
    }
  },