vue+element ui 两个下垃圾框为同一数据来源的时候，两个下拉框进行已选择对象的置灰（不显示）

需求1
所有用户数据来源 A单选 B多选
A下拉框选择数据之后，B下拉框不允许选择A下拉框选择过的数据，反之亦然

需求2
所有用户数据来源，但是两个下拉框要分别赋值，就是AB的数据源都来源于所有用户，但是要重新赋值给两个下拉框对应的数据源
A下拉框选择数据之后，B下拉框不允许选择A下拉框选择过的数据，反之亦然

现在这个方法实现的是置灰，但是突然又要求不显示了，所以补充一下，如果不显示，那直接渲染的时候隐藏就可以了
如果你是隐藏，那看完了文章照这一小块替换就行

// v-show="!(item.disabled)"
<el-option
   v-for="item in userOptions"
    v-show="!(item.disabled)"
    :key="item.id"
    :label="item.userName"
    :value="item.id"
  />

下边是我的代码

需求1

<el-form-item label="任务责任人:" prop="managerId">
              <el-select v-model="postForm.managerId" clearable placeholder="选择任务责任人" style="width: 200px;">
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.id"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>
<el-form-item label="任务执行人:" prop="executorIds">
              <el-select v-model="postForm.executorIds" clearable multiple placeholder="选择任务执行人" style="width: 400px;">
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.id"
                  :disabled="item.disabled"
                />
              </el-select>
              </el-form-item>

export default {
  name: 'CreateForm',
  inject: ['reload'],
  data() {
    return {
      postForm: {
        managerId: '',
        executorIds: [],     
      },
      // 责任人选项
      // 执行人人选项 因为要过滤 所以只能用一个数据源
      userOptions: [],
  computed: {
    // 用于做用户信息过滤
    managerId() {
      return this.postForm.managerId
    },
    executorIds() {
      return this.postForm.executorIds
    }
  },
  watch: {
    managerId(val, OldVal) {
      getdiabledSelect(val, OldVal, 'id', this.userOptions)
    },
    executorIds(val, OldVal) {
      getdiabledSelectList(val, OldVal, 'id', this.userOptions)
    }
  },
  created() {
    // 用户
    this.getUserOptions()
  },
  methods: {
    getUserOptions() {
      getUserInfoList().then(response => {
        this.userOptions = response.data
      }).catch((err) => {
        if (err.status !== '-1') {
          this.$message({
            message: err.msg,
            type: 'error',
            duration: 3 * 1000
          })
        }
      })
    }
  }
}

下边是JS里边的方法

// 责任人监听
export function getdiabledSelect(val, oldVal, id, dataArray) {
  dataArray = dataArray.filter((value, key, arr) => {
    if (value[id] === oldVal) {
      value.disabled = false
    } else if (value[id] === val) {
      value.disabled = true
    }
    return value
  })
}

// 执行人监听
export function getdiabledSelectList(val, oldVal, id, dataArray) {
  dataArray.map((x, i) => {
    oldVal.map((s) => {
      if (x.id === s) {
        x.disabled = false
      }
    })
    val.map((s) => {
      if (x.id === s) {
        x.disabled = true
      }
    })
  })
  return dataArray
}

需求2 这里只要将过滤后的值 赋值给两个绑定的选项数据源即可

<el-form-item label="任务责任人:" prop="managerId">
                <el-select v-model="postForm.managerId" clearable :disabled="readonlyYES" placeholder="选择任务责任人" style="width: 200px;">
                  <el-option
                    v-for="(item,index) in managerOptions"
                    :key="index"
                    :label="item.userName"
                    :value="item.id"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
<el-form-item label="任务执行人:" prop="executorIds">
                <el-select v-model="postForm.executorIds" clearable multiple :disabled="readonlyYES" placeholder="选择任务执行人" style="width: 400px;">
                  <el-option
                    v-for="item in executorOptions"
                    :key="item.id"
                    :label="item.userName"
                    :value="item.id"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>

  watch: {
    managerId(val, OldVal) {
      if (this.postForm.parentId === 0) {
        getdiabledSelect(val, OldVal, 'id', this.userOptions)
        // 只是多了这一步
        this.managerOptions = this.userOptions
      }
    },
    executorIds(val, OldVal) {
      if (this.postForm.parentId === 0) {
        getdiabledSelectList(val, OldVal, 'id', this.userOptions)
        // 只是多了这一步
        this.executorOptions = this.userOptions
      }
    }
  },