基于element ui el-select的自定义时间选择器

一，组件需求

  a）要在选择完时间段之后禁用已选的是时间的，方便添加第二个时间段。

二，完成思路

  a）刚开始我选择使用的是el-time-select时间选择器，因为他有一个自带的minTime和maxTime属性，但是这两个属性只能禁用所选的时间段之外的时间，不符合项目需求。

  b）后来突然想到element ui的时间选择器其实也相当于是el-select选择器，同时el-select选择器的选项拥有disabled是否禁用这个属性，在通过本身的change来检测数据是否发生了变化从而不断地循环选项数组来添加删除disabled属性就可以实现项目需求了。

  c）因为需要选择多个时间段，所以这里使用了动态生成时间选择器。

三，实现代码

  a）HTML代码

        <el-form-item label="" prop="">
          <div v-for="(domain, index) in addForm.allow_times" :key="domain.key">
            <el-form-item
            :label="'选择时间段' + (index+1) + '：'"
            prop="">
            <template>
            <el-select v-model="domain.start_time" @change="addtimechange" @clear="addcleartime(index)" placeholder="请选择开始时间" clearable>
              <el-option
                v-for="item in Alltime"
                :key="item.value"
                :label="item.label"
                :value="item.label"
                :disabled="item.disabled">
              </el-option>
            </el-select>
            <el-select v-model="domain.end_time" @change="addtimechange" @clear="addcleartime(index)" placeholder="请选择结束时间" clearable>
              <el-option
                v-for="item in Alltime"
                :key="item.value"
                :label="item.label"
                :value="item.label"
                :disabled="item.disabled">
              </el-option>
            </el-select>
            </template>
            <el-button class="remove-item" size="mini" type="primary" icon="el-icon-plus" circle  @click="addDomain"></el-button>
            <el-button size="mini" type="danger" icon="el-icon-close" circle v-show="addForm.allow_times.length>1" @click.prevent="removeDomain(domain)"></el-button>
            </el-form-item>
          </div>
        </el-form-item>

  b）动态禁用时间选择器选项js代码

// 清除添加表单时间段禁用
    addcleartime (index) {
      this.addisdisabled = true
      this.apoint_machine_choice = []
      const istime = []
      if (Number.isInteger(index)) {
        for (let y = parseInt(this.addFormAllowTimes[index].start_time); y <= parseInt(this.addFormAllowTimes[index].end_time); y++) {
        istime.push(y)
      }
      this.Alltime.forEach(p => {
        istime.forEach(v => {
          if (p.value === v) {
            p.disabled = false
          }
        })
      })
      } else {
        for (let y = parseInt(index.start_time); y <= parseInt(index.end_time); y++) {
        istime.push(y)
      }
      this.Alltime.forEach(p => {
        istime.forEach(v => {
          if (p.value === v) {
            p.disabled = false
          }
        })
      })
      }
    },
    // 判断编辑表单时间段选择是否正确
    edittimechange () {
      this.editisdisabled = true
      this.edit_apoint_machine_choice = []
      const istime = []
      const BreakErr = {}
      try {
        this.editForm.allow_times.forEach(v => {
        if (!v.start_time || !v.end_time || v.start_time > v.end_time) {
          throw BreakErr
        }
      })
      } catch (e) {
        if (e !== BreakErr) throw e
        return
      }
      console.log(this.editForm.allow_times)
      this.editFormAllowTimes = JSON.parse(JSON.stringify(this.editForm.allow_times))
      for (let i = 0; i < this.editForm.allow_times.length; i++) {
        for (let y = parseInt(this.editForm.allow_times[i].start_time) + 1; y <= parseInt(this.editForm.allow_times[i].end_time) - 1; y++) {
          istime.push(y)
        }
      }
      console.log(istime)
      this.Alltime.forEach(z => {
        istime.forEach(v => {
          if (z.value === v) {
            z.disabled = true
          }
        })
      })
    }

  c）动态生成时间选择器js代码

// 增加表单项
    addDomain () {
      if (!this.addForm.allow_times[0].start_time || !this.addForm.allow_times[0].end_time) {
        return this.$message.error('请至少选择一条数据！')
      }
      this.addisdisabled = true
      this.apoint_machine_choice = []
      this.addForm.allow_times.push({
        start_time: '',
        end_time: ''
      })
    },
    // 删除表单项
    removeDomain (item) {
      this.addisdisabled = true
      this.apoint_machine_choice = []
      var index = this.addForm.allow_times.indexOf(item)
      if (index !== -1) {
        this.addForm.allow_times.splice(index, 1)
        this.addFormAllowTimes.splice(index, 1)
      }
      this.addcleartime(item)
    }