南阳做网站哪个好免费网站安全软件大全
在实习中,遇到了如下需求,要求如下:
上面提到了一个需求为,选择全部与选择一个或者多个互斥,我们来看一下如何解决
核心代码
监听value的变化,如果含有‘全部’,且数组长度>1,则删除第一个元素
- 先选择‘全部’,再选择其他,‘全部’会被剔除
- 先选择一个或者多个‘其他’,一个或者多个‘其他’会被剔除
- 无论怎么选择都可以实现全部与选择一个或者多个‘其他’互斥
watch: {value(newVal) {if (newVal.includes('全部')) {if (newVal.length > 1) {this.value.shift();}} else if (this.value.length === this.cityList.length - 1) {// 如果选择了除“全部”外的所有城市,自动选择“全部”this.value = ['全部'];}}}
完整代码
<template><Select v-model="value" multiple filterable placeholder="点击修改应用" style="width: 200px;"><Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option></Select></template><script>import { Option, Checkbox, Select } from 'view-design';export default {components: {Select,Option,Checkbox},data() {return {value: [],cityList: [{ value: '全部', label: '全部' },{ value: '北京', label: '北京' },{ value: '上海', label: '上海' },{ value: '广州', label: '广州' },{ value: '深圳', label: '深圳' }]};},watch: {value(newVal) {if (newVal.includes('全部')) {if (newVal.length > 1) {this.value.shift();}} else if (this.value.length === this.cityList.length - 1) {// 如果选择了除“全部”外的所有城市,自动选择“全部”this.value = ['全部'];}}}}</script>