el-select(控制多个多选框的禁用和可用)

实现效果：

点击冻结解冻可以控制左侧多选的禁用和可用状态

原理：：disabled='disabledName>0&& disabledName.indexof(city)!==-1'
判断被禁用数组中包含不包含当前项，如包含则禁用，不包含则可用。

<template>
  <div style="display: flex; width: 800px">
    <div style="flex: 4">
      <el-checkbox-group v-model="checkedCities" @change="handleChange">
        <el-checkbox
          v-for="city in cities"
          :label="city"
          :key="city"
          :disabled="
            disabledName.length > 0 && disabledName.indexOf(city) != -1
          "
          >{{ city }}</el-checkbox
        >
      </el-checkbox-group>
    </div>
    <div style="flex: 1">
      <div
        v-for="city in Cities"
        :key="city"
        style="margin-bottom: 20px; display: flex"
      >
        <div style="margin-right: 20px">{{ city.name }}</div>
        <div>
          <span
            v-if="city.status"
            style="font-size: 16px; color: red"
            @click="handle(city.name, true)"
            >冻结</span
          >
          <span v-else @click="handle(city.name, false)" style="color: blue"
            >解冻</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkedCities: [], //左边选中的数据
      Cities: [], //右边的遍历数据
      cities: [], //左边的el-checkbox遍历数据
      disabledName: [], //被禁用的el-checkbox项
      cityOptions: [
        { name: '上海' },
        { name: '北京' },
        { name: '广州' },
        { name: '深圳' },
      ],
    }
  },
  created() {
    this.cities = []
    this.cityOptions.forEach((v) => {
      this.cities.push(v.name)
    })
  },
  methods: {
    handleChange(value) {
      console.log(value, 'value')
      this.Cities = this.checkedCities.map((i) => {
        return {
          name: i,
          status: true,
        }
      })
      console.log(this.Cities, 'this.Cities')
    },
    handle(name, status) {
      this.Cities.forEach((item) => {
        if (item.name == name) {
          item.status = !status
        }
      })
      console.log(this.Cities, 'this.Cities')
      if (status == true) {
        this.disabledName.push(name) //点击冻结（true）表示把当前项添加到禁用列表里
        this.disabledName = [...new Set(this.disabledName)]
      } else {
        let index = this.disabledName.indexOf(name) //点击解冻（false）表示把当前项从禁用列表中去除
        this.disabledName.splice(index, 1)
      }
      console.log(this.disabledName, 'this.disabledName')
    },
  },
}
</script>