element 时间选择器（时分）不能用重复时间段（基于VUE）

需求：element 时间选择器（时分）不能用重复时间段就是第二个时间段不能选择前面的结束时间之前的时间段

其实只有描述不是很准确，上图吧：

比如我第一行选择了8点到12点，那我新增一行就不能选12点以前的了

大概就是这个意思，就是已经选择过了的时间段，下一次就不能选了，下面发代码：

<div class="personItem-table-head"><div class="personItem-table-head-right"><el-button icon="el-icon-plus" @click="addLine">新增行</el-button><el-button icon="el-icon-minus" @click="deleteLine" v-if="selectedList.length!=form.dtlList.length && form.dtlList.length>1">删除行</el-button></div></div><el-table class="position-table" :data="form.dtlList" border style="width: 100%":row-class-name="tableRowClassName"@selection-change="selectionChange"><el-table-column type="selection" width="60" v-if="stuat==0 && form.dtlList.length!=1"></el-table-column><el-table-column prop="beginDate" label="开始时间"><template slot-scope="scope"><el-time-selectv-model="scope.row.beginDate":disabled="scope.row.timeShow"@change="changeStarDate(scope.row)":picker-options="appointmentTimeObj" placeholder="选择时间"></el-time-select></template></el-table-column><el-table-column prop="endDate" label="结束时间"><template slot-scope="scope"><el-time-selectv-model="scope.row.endDate":disabled=" scope.row.timeShow"@change="changeEndDate(scope.row)":picker-options="appointmentTimeObj" placeholder="选择时间"></el-time-select></template></el-table-column></el-table>export default {
data() {return {form: {dtlList: [{beginDate: '',endDate: '',}],operaTypeCode: 102},selectedList: [],appointmentTimeObj:{ start: '08:30',step: '01:00',end: '18:30'},starTime:['08:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00'],oldTimeList:[]，}
},
created() {let a=this.starTime[0]let b=this.starTime[this.starTime.length-1]this.appointmentTimeObj={ start: a,step: '01:00',end: b}this.oldTimeList=JSON.parse(JSON.stringify(this.starTime))
},
methods: {changeStarDate(row) {if (row.beginDate && row.endDate) {if (!this.changeCompareDate(row.beginDate, row.endDate)) {this.$message({message: '开始时间必须小于结束时间',type: 'warning'});row.beginDate = ''return false}}},changeEndDate(row) {if (row.beginDate && row.endDate) {if (!this.changeCompareDate(row.beginDate, row.endDate)) {this.$message({message: '开始时间必须小于结束时间',type: 'warning'});row.endDate = ''return false}}},tableRowClassName(row) {row.row.index = row.rowIndex;},//新增行addLine() {let lastList=JSON.parse(JSON.stringify(this.form.dtlList))let newObj=lastList[lastList.length-1];if(!newObj.beginDate || !newObj.endDate){this.$message({message: '请选择时间',type: 'warning'});return}this.starTime= this.oldTimeList.filter(item=>{return item>newObj.endDate})if(this.starTime.length==0){this.$message({message: '没有可选时间',type: 'warning'});return}this.starTime.unshift(newObj.endDate)let a=this.starTime[0]let b=this.starTime[this.starTime.length-1]this.appointmentTimeObj={ start: a,step: '01:00',end: b}this.form.dtlList.push({beginDate: '',endDate: '',nubmber: 0})if(this.form.dtlList.length>1){this.form.dtlList.forEach(item=>{if(item.beginDate && item.endDate){item.timeShow=true}else {item.timeShow=false}})this.$forceUpdate();}},selectionChange(rows) {this.selectedList = [];rows.forEach(item => {this.selectedList.push(item.index);});},deleteLine() {if (this.selectedList.length == 0) {this.$message.warning('请选择需要删除的选项')return}if(this.selectedList.length==this.form.dtlList.length){this.$message({message: '不能删除全部',type: 'warning'});return;}this.form.dtlList = this.form.dtlList.filter((item, index) => {let arrlist = this.selectedList;return !arrlist.includes(index);});if(this.form.dtlList.length>1){this.form.dtlList.forEach((item,index)=>{if(index <this.form.dtlList.length-1){item.timeShow=true}else {item.timeShow=false}})let moreObj=this.form.dtlList[this.form.dtlList.length-2]this.starTime= this.oldTimeList.filter(item=>{return item>moreObj.endDate})this.starTime.unshift(moreObj.endDate)let a=this.starTime[0]let b=this.starTime[this.starTime.length-1]this.appointmentTimeObj={ start: a,step: '01:00',end: b}this.$forceUpdate();}else {this.form.dtlList.forEach((item,index)=>{item.timeShow=false})let a=this.oldTimeList[0]let b=this.oldTimeList[this.oldTimeList.length-1]this.appointmentTimeObj={ start: a,step: '01:00',end: b}}},
}
}

在mian.js里

//校验两个时分秒的大小
Vue.prototype.$changeCompareDate = function (t1, t2) {let date = new Date();let a = t1.split(":");let b = t2.split(":");return date.setHours(a[0], a[1]) < date.setHours(b[0], b[1]);
}

好了，复制下来就能用了，可能有些地方要自己修一下下。亲测可用。。觉得还行的话能否点个赞？

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！