场景：点击新增添加按钮，列表table会新增一条包含下拉菜单的数据，如果其中任何一个下拉框选择了某个值，那么新增的下拉菜单的选项中该值是禁用状态，只能选择其他未被选中过的值。点击删除按钮后，已禁用的选项放开，可再次选择。

思路：在使用 <el-option> 组件时，如果你希望在选择某个选项后禁用它，可以通过动态绑定 disabled 属性来实现。这通常涉及到两个方面：

1. 选择后的禁用：当用户选择了一个选项后，你需要更新这个选项的 disabled 状态。

2. 动态绑定：使用 Vue 的响应式数据来动态控制 disabled 属性。

示例：

假设你有一个下拉选择框，用户选择后，希望该选项不再可用。

HTML 部分。

1、单个下拉
<template>
  <el-select v-model="selected" placeholder="请选择" @change="change">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled">
    </el-option>
  </el-select>
</template>



2、循环多个下拉
<template>
<el-form ref="form" :model="formData" :inline="true" label-position="right">
 <el-button type="primary" @click="addCity">添加</el-button>
 <div v-for="(item,index) in formData.cityList" :key="item.key">
   <el-form-item label="居住地" :prop="`cityList[${index}].city`" label-width="150" 
     :rules="{ required: true, message: '请选择', trigger: 'blur'}">
     <span class="label" slot="label" v-if="!index">
       <template><em style="color: red">*</em></template>
       {{ lableName}}
     </span>
      <el-select filterable clearable v-model="item.city" @change="cityChange(`cityList[${index}].city`, item)">
        <el-option
         v-for="(child, idx) in cityOptions"
         :value="child.value"
         :label="child.label"
         :key="idx"
         :disabled="child.disabled"
         ></el-option>
        </el-select>
   </el-form-item>
   <el-button type="danger" @click="delCity(index)">删除</el-button>
 </div>
 <el-button type="primary" @click="subCity">提交</el-button>
</el-form>
</template>

JavaScript 部分

<script>
export default {
  data() {
    return {
      //单个数据
      selected: '', // 用户选择的选项
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],


      //多个数据
      lableName: '居住地',
      formData: {
        cityList: [
          {
            city: '',
            key: Date.now()
          }
        ],
      },
      cityOptions: [
        { value: 'Chengdu', label: '成都' },
        { value: 'Shenzhen', label: '深圳' },
        { value: 'Guangzhou', label: '广州' }
      ],
    };
  },
  watch: {
    selected(newVal) {
      this.disableSelectedOption();
    }
  },
  methods: {
    方法一：单个select设置禁用
    disableSelectedOption() {
      this.options = this.options.map(option => {
        if (option.value === this.selected) {
          return { ...option, disabled: true }; // 禁用当前选中的选项
        }
        return option; // 其他选项保持不变
      });
    },


    方法二：批量添加后多个select设置禁用
    addCity() {
      this.formData.cityList.push({
        city: '',
        key: Date.now()
      })
    },

    delCity(index) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
         this.formData.cityList.splice(index, 1)
         this.disabledOptions()
       })
      .catch(() => {})
    },

    cityChange(name, item) {
      this.$refs.form.validateField(name) // 清除必填校验
      this.disabledOptions()
    },

    subCity() {
      this.$refs.form.validate(valid => {
        if (valid) {
          //todo
        } else {
          return false
        }
      })
    },

    disabledOptions() {
      this.cityOptions.forEach(item => {
        item.disabled = this.formData.cityList.some(row=> row.city=== item.value)
      })
    },
    
  }
}
</script>