动态添加时间范围,如何实现已选时间段的置灰效果?
动态添加时间范围,如何置灰已选择时间?
问题:
在时间范围选择界面中,需要实现以下规则:
- 开始时段选择后,结束时段的值小于开始时段的置灰不能选择。
- 选择了多个时间段后,已选的时间段置灰不能选择。
解决方法:
父组件代码示例:
<template> <el-table :data="tabledata"> <el-table-column prop="starttime" label="开始时段"></el-table-column> <el-table-column prop="endtime" label="结束时段"></el-table-column> <el-table-column prop="remark" label="备注"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" @click="handleedit(scope.row)">编辑</el-button> <el-button type="danger" @click="handledelete(scope.row)">删除</el-button> </template> </el-table-column> </el-table> </template> <script> import { reactive, ref } from 'vue'; import editdialog from './editdialog.vue'; export default { data() { return { tabledata: reactive([]), } }, components: { editdialog }, methods: { // 编辑时间范围 handleedit(row) { this.$refs.editdialog.toggledialog(row); }, // 删除时间范围 handledelete(row) { this.tabledata = this.tabledata.filter(item => item !== row); }, }, } </script>
子组件(editdialog.vue)代码示例:
<template> <el-dialog :visible="visible" title="编辑时间范围" @close="handleClose"> <el-form :model="formData" label-position="top" label-width="100px" class="edit-dialog-form" > <el-form-item label="开始时段"> <el-time-picker v-model="formData.startTime" format="HH:mm"></el-time-picker> </el-form-item> <el-form-item label="结束时段"> <el-time-picker v-model="formData.endTime" format="HH:mm"></el-time-picker> </el-form-item> <el-form-item label="备注"> <el-input v-model="formData.remark" placeholder="请输入备注"></el-input> </el-form-item> </el-form> <div class="dialog-footer" slot="footer"> <el-button @click="handleClose">取消</el-button> <el-button type="primary" @click="handleSave">保存</el-button> </div> </el-dialog> </template> <script> import { ref } from 'vue'; import { validateTimeRange } from '@/utils/time'; export default { props: ['visible', 'row'], setup(props, { emit }) { const formData = ref(props.row ? Object.assign({}, props.row) : {}); const handleClose = () => { emit('close'); }; const handleSave = () => { const isValid = validateTimeRange(formData.value); if (!isValid) { return; } emit('save', formData.value); handleClose(); }; return { formData, handleClose, handleSave }; }, }; </script>
规则实现原理:
子组件 editdialog 负责管理时间范围的编辑,其中包含了输入开始时段、结束时段和备注的表单。
validatetimerange 函数用于校验时间范围的合法性,规则如下:
- 开始时段不能大于等于结束时段。
- 时间范围不能与已有的时间范围交叉。
主组件 table 中的 handleedit 方法负责打开编辑对话框,传递当前选中的时间范围供子组件编辑。
handlesave 方法负责将编辑后的时间范围数据保存到主组件中,并将对话框关闭。
以上就是动态添加时间范围,如何实现已选时间段的置灰效果?的详细内容,更多请关注硕下网其它相关文章!