element中给select添加全选的option

一，元素中的数据

<el-select v-model="my_stars" placeholder="国家" multiple  collapse-tags >
          <el-option label="全球" value="全球"></el-option>
          <template v-for="(item, index) in languages">
            <el-option
              :value="item.coding"
              :key="index"
              :label="item.memo"
            ></el-option>
          </template>
        </el-select>

二，data的数据

data() {
    const token = this.$store.state.user.token;
    return {
      my_stars: [],
      languages:[
        {
            "countryId":1,
            "coding":"US",
            "countryName":"United States",
            "lang":"en",
            "binglang":"en",
            "languageMemo":null,
            "memo":"美国"
        },
        {
            "countryId":2,
            "coding":"CN",
            "countryName":"China",
            "lang":"zh",
            "binglang":"zh",
            "languageMemo":null,
            "memo":"中国"
        },
        {
            "countryId":4,
            "coding":"UK",
            "countryName":"United Kingdom",
            "lang":null,
            "binglang":null,
            "languageMemo":null,
            "memo":"英国"
        },
        {
            "countryId":8,
            "coding":"FR",
            "countryName":"France",
            "lang":"fr",
            "binglang":"fr",
            "languageMemo":null,
            "memo":"法国"
        },
        {
            "countryId":208,
            "coding":"GB",
            "countryName":"UK",
            "lang":null,
            "binglang":null,
            "languageMemo":null,
            "memo":"英国"
        }
      ]
     }
  }

三，这里我们使用watch监听数据变化，watch里面可以接收两个参数，data未变动前的值和data变动后的值，方便我们进行对比计算出点击的是哪个选项。

// watch是跟data平级的一个对象
watch: { 
    my_stars: function(val, oldval) {
      console.log(111);
      let newindex = val.indexOf("全球"), 
        oldindex = oldval.indexOf("全球"); //获取val和oldval里all的索引,如果没有则返回-1，有则说明选择了全选
      //选择全选时，之前是没有全选状态
      if (newindex != -1 && oldindex == -1 && val.length > 0) {
        this.my_stars = ["全球"];
        // this.languages.forEach(v => {
        //   this.my_stars.push(v.coding);
        // });  //这里如果需要全部选中option将其打开就可以了
        //选择全选时，之前是全选状态
      } else if (newindex == -1 && oldindex != -1 && val.length > 0) {
        this.my_stars = [];
        //选择 非全选 选项时，之前是全选状态
      } else if (
        newindex != -1 &&
        oldindex != -1 &&
        Math.abs(val.length - oldval.length) == 1
      ) {
        this.my_stars.shift("全球");
        // this.my_stars.remove('-100');
        //选择 非全选 选项时，选择完了所有的星级级别
      } else if (
        newindex == -1 &&
        oldindex == -1 &&
        this.languages.length == val.length &&
        val.length > 0
      ) {
        this.my_stars = ["全球"];
        // this.languages.forEach(v => {
        //   this.my_stars.push(v.coding);
        // });	 //这里如果需要全部选中option将其打开就可以了
      }
      console.log(this.my_stars);
      this.$set(this.formGameEdit.appGameInfoEntity,'countryDetaiilArrey',this.my_stars)
      // this.$forceUpdate();  // 如果不起效，可能是你的data池子太深了，重新刷新下data打开此行注释
    }
  },