vue ElementUI下拉框最多只能选俩个,但是选了全国就不能选其他的,选其他的最多只能选俩 全国选项是前端塞得,怎么给他设置选全国之后其他不能选,选其他的最多选俩项
时间: 2023-07-16 16:14:20 浏览: 78
可以通过在下拉框的选项中添加一个“全国”选项,并且给这个选项添加一个特殊的标识,然后在下拉框的选项改变事件中判断当前选中的选项是否为“全国”,如果是,则禁用其他选项;如果不是,则判断已经选中的选项数量是否超过了两个,如果超过了,则禁用当前选中的选项。
示例代码如下:
```html
<el-select v-model="selectedOptions" @change="handleChange">
<el-option v-for="(option, index) in options" :key="index" :label="option.label" :value="option.value" :disabled="option.disabled"></el-option>
</el-select>
```
```javascript
export default {
data() {
return {
options: [
{ label: '全国', value: 'all', disabled: false },
{ label: '北京', value: 'bj', disabled: false },
{ label: '上海', value: 'sh', disabled: false },
{ label: '广州', value: 'gz', disabled: false },
{ label: '深圳', value: 'sz', disabled: false },
{ label: '杭州', value: 'hz', disabled: false }
],
selectedOptions: []
}
},
methods: {
handleChange() {
const allOption = this.options.find(option => option.value === 'all')
const selectedAll = this.selectedOptions.includes('all')
if (selectedAll) {
// 禁用除全国以外的选项
this.options.forEach(option => {
if (option.value !== 'all') {
option.disabled = true
}
})
} else {
// 启用所有选项
this.options.forEach(option => {
option.disabled = false
})
// 判断已选中的选项数量是否超过了两个
if (this.selectedOptions.length >= 2) {
const selectedOption = this.options.find(option => option.value === this.selectedOptions[this.selectedOptions.length - 1])
selectedOption.disabled = true
}
}
}
}
}
```
阅读全文