桐乡城市建设局网站,seo外包 杭州,东莞常平有多少个村,wordpress搭电影网站vue3中两个el-select下拉框选项相互影响 1、开发需求2、代码2.1 定义hooks文件2.2 在组件中使用 1、开发需求
如图所示#xff0c;在项目开发过程中#xff0c;遇到这样一个需求#xff0c;常规时段中选中的月份在高峰时段中是禁止选择的状态#xff0c;反之亦然。
2、代… vue3中两个el-select下拉框选项相互影响 1、开发需求2、代码2.1 定义hooks文件2.2 在组件中使用 1、开发需求
如图所示在项目开发过程中遇到这样一个需求常规时段中选中的月份在高峰时段中是禁止选择的状态反之亦然。
2、代码
2.1 定义hooks文件
// hooks/useMonth.js
export default function () {const monthOptions [{value: January,label: 1月,disabled: false,},{value: February,label: 2月,disabled: false,},{value: March,label: 3月,disabled: false,},{value: April,label: 4月,disabled: false,},{value: May,label: 5月,disabled: false,},{value: June,label: 6月,disabled: false,},{value: July,label: 7月,disabled: false,},{value: August,label: 8月,disabled: false,},{value: September,label: 9月,disabled: false,},{value: October,label: 10月,disabled: false,},{value: November,label: 11月,disabled: false,},{value: December,label: 12月,disabled: false,},]//把方法和数据返回出去return {monthOptions,}
}
2.2 在组件中使用
templateel-select v-modelpeakMonth multiple placeholder请选择月份 changehandleMonthel-option v-formonth in monthOptions :keymonth.value :labelmonth.label:valuemonth.value :disabledmonth.disabled //el-select
/template
script setup
import { reactive, ref, watch } from vue
//引入hooks文件
import useMeasurementCommon from /hooks/useMeasurementCommon
const { monthOptions } useMeasurementCommon()
// 处理月份选择的回调
let monthsArr ref([])
const handleMonth (month) {console.log(month)monthsArr.value.push(...month)console.log(monthsArr)console.log(monthOptions)monthOptions.forEach(item {if (monthsArr.value.indexOf(item.value) ! -1) {item.disabled true} else {item.disabled false}})
}
/script
