SOURCE

var Main = {
    data() {
        return {
            selectableRange: ['00:00:00-23:59:00'],
            value2: '',
            value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
            list: [
                {
                    startTime: null,
                    endTime: null
                },
                {
                    startTime: null,
                    endTime: null
                },
                {
                    startTime: null,
                    endTime: null
                }
            ]
        };
    },
    methods: {
        startChange(val) {
            //   console.log(val)
        },
        endChange(val) {
            //   console.log(val)
        }
    },
    watch: {
        list: {
            handler(val) {
                val.forEach(v => {
                    if (v.startTime && v.endTime) {
                        let { startTime, endTime } = v
                        let temp = JSON.parse(JSON.stringify(this.selectableRange))
                        temp.forEach((e, i,arr) => {
                            let t = e.split('-')
                            if (startTime >= t[0] && endTime <= t[1]) {
                               let res = [`${t[0]}-${startTime}:00`, `${endTime}:00-${t[1]}`]
                               console.log(res)
                                this.selectableRange.splice(i, 1, ...res)
                                
                                // this.selectableRange = res
                                return false
                            }
                        })
                    }
                })
            },
            deep: true
        }
    },
    computed: {
        // selectableRange() {
        //     return ['00:00:00-23:59:00']
        // }
    }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");

<div id="app">
	<template>
{{selectableRange}}
		<div v-for="(item,index) of list" :key="index">
			<!-- <el-time-select placeholder="起始时间" v-model="item.startTime" :picker-options="{
        
        start:'06:00',
        end:'22:00',
        maxTime:item.endTime
    }">
			</el-time-select>
			<el-time-select placeholder="结束时间" v-model="item.endTime" :picker-options="{
        selectableRange:'00:00:00-22:00:00'
    }">
			</el-time-select> -->
            	<el-time-picker size="mini" @change="startChange" value-format="HH:mm" format="HH:mm" v-model="item.startTime" :picker-options="{
      selectableRange
    }" >
		</el-time-picker>
        	<el-time-picker size="mini" @change="endChange" value-format="HH:mm" format="HH:mm" v-model="item.endTime" :picker-options="{
      selectableRange
    }" >
		</el-time-picker>
		</div>

	

		<!-- <el-time-picker is-range v-model="value1" format="HH:mm" :picker-options="{
        selectableRange:'09:00-18:00'
    }" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
		</el-time-picker> -->
	</template>
</div>