实习随笔【iviews的Select实现‘与全部互斥’的多选】

        在实习中，遇到了如下需求，要求如下：

        上面提到了一个需求为，选择全部与选择一个或者多个互斥，我们来看一下如何解决

核心代码

        监听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>