实习随笔【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>