动态添加时间范围，如何置灰已选择时间？-灵析社区
CTang父组件代码 {{ item.startTime + "-" + item.endTime }} 编辑 // 组件 import AddTime from "./component/addTime.vue"; // utils import { deepClone } from "js-fastcode"; export default { name: "VueTemplateIndex", components: { AddTime }, data() { return { companyArr: [], companyPos: 0, showAddDialog: { visible: false }, idx: "", // 编辑当前行行数 tableData: [], }; }, mounted() { const season = ["春季", "夏季"]; const period = ["尖峰", "高峰", "低谷"]; this.tableData = Array.from({ length: season.length }, (_, i) => period.map((pj, j) => ({ season: season[i], period: pj, timeList: [], })) ).flat(); this.merge(this.tableData); }, methods: { // 表格行合并方法 merge(tableData) { // 要合并的数组的方法 this.companyArr = []; this.companyPos = 0; for (let i = 0; i 0 ? 1 : 0; // 如果被合并了_row=0则它这个列需要取消 return { rowspan: _row_1, colspan: _col_1, }; } }, // 新增数据 handleFormEdit(list, index) { let arr = deepClone(this.tableData), brr = []; brr = arr .filter((item) => item.season === list.season) .map((item) => item.timeList) .flat(); this.idx = index; this.showAddDialog = { visible: true, title: "编辑", data: brr, list: list.timeList, }; }, // 新增回调 getAddResult(list) { this.tableData[this.idx].timeList = list; }, }, }; 子组件代码 取 消 确 定 import { devideTimes, deepClone } from "js-fastcode"; // 引入自定义js库 export default { name: "", props: { showAddDialog: { type: Object, default: () => ({}), }, }, data() { return { tableData: [], propsData: [], // 存储父组件传递过来的时间段 allAddData: [], // 存储所有已选时间段 }; }, watch: { showAddDialog: { handler(newVal, oldVal) { this.tableData = []; // 如果当前行有数据，则显示当前行数据 if (newVal.list.length) { this.tableData = newVal.list.map((item) => ({ ...item, disabled: true, })); } else { // 如果当前行没有数据，则默认显示开始时间和结束时间 this.tableData = [{ startTime: "", endTime: "" }]; } for (let i in this.endTimeList) { this.endTimeList[i].disabled = false; } for (let i in this.startTimeList) { this.startTimeList[i].disabled = false; } this.propsData = deepClone(newVal.data); // 将当前季节下的所有时间段都放在数组中 this.allAddData = deepClone(newVal.data); this.handleDisable(); }, deep: true, }, }, computed: { // 获取默认的1-24小时数据 timeOptions() { return devideTimes(30, 2); }, startTimeList() { return this.timeOptions.map((item) => ({ value: item, label: item, disabled: false, })); }, endTimeList() { return this.timeOptions.map((item) => ({ value: item, label: item, disabled: false, })); }, }, mounted() {}, methods: { // 新增行 handleRowAdd(row, idx) { this.allAddData = this.handleUnique([ ...this.tableData, ...this.propsData, ]); this.handleDisable(); // 判断开始时间所有项全部是不是禁用状态，如果是则说明所有时段已选择，否则未全部选择 let flag = this.startTimeList.every((item) => item.disabled); if (flag) { this.$message.warning("所有时段都已选择"); return false; } if (!row.startTime && !row.endTime) { this.$message.warning("开始时段和结束时段必填"); return false; } this.tableData[idx].disabled = true; this.tableData.push({ startTime: "", endTime: "", }); }, // 删除行 handleRowDelete(row, index) { // 当只有一条数据时，初始化表格数据 if (this.tableData.length === 1) { this.tableData = [{ startTime: "", endTime: "" }]; } else { this.tableData.splice(index, 1); } this.propsData = this.propsData.filter( (item) => !(item.startTime === row.startTime && item.endTime === row.endTime) ); this.allAddData = this.handleUnique([ ...this.tableData, ...this.propsData, ]); this.handleDisable(); }, // 数组对象去重 handleUnique(arr) { let obj = {}; return arr.reduce((cur, next) => { obj[next.startTime + next.endTime] ? "" : (obj[next.startTime + next.endTime] = true && cur.push(next)); return cur; }, []); }, // 切换起始时间 handleStartChange(time) { let times = this.timeOptions; // 找到所选开始时间的下标 let start_index = times.findIndex((value) => value === time.startTime); // 将结束时间小于开始时间的选项禁用 for (let i = 0; i { start.disabled = false; }); // 遍历所有已选时间段 this.allAddData.forEach((item) => { let start_index = times.findIndex((value) => value === item.startTime); let end_index = times.findIndex((value) => value === item.endTime); this.startTimeList.forEach((start, i) => { if (i >= start_index && i = 2 && this.tableData.some( (item) => item.startTime === "" || item.endTime === "" ); if (flag) { this.$message.warning("请将所有时段填写完整"); return false; } // 提交时将未填写时段的数据去除，主要是针对只有一条数据未填写情况 this.tableData = this.tableData.filter( (item) => item.startTime && item.endTime ); this.showAddDialog.visible = false; this.$emit("get-add-result", this.tableData); }, }, }; .remove-icon, .plus-icon { font-size: $fs22; vertical-align: middle; margin-left: 10px; }