vue两个input公用一个数据

需求

两个下拉框公用一个数据源,A下拉选择的数据B无法选择,反正依然.

思路

首先公用同一个数据,在下拉添加disabled选项,具体代码实现看下面代码

下拉框部分

      <el-row>
          <el-col :span="12">
            <el-form-item label="源地址集:" prop="sourceaddressset">
              <el-select
                v-model="editForm.sourceaddressset"
                multiple
                collapse-tags
                placeholder="请选择源地址集(支持多选)"
                style="295px"
              >
                <el-option
                  v-for="item in sourceaddresssetOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="目的地址集:"
              style="margin-left:-55px"
              label-width="120px"
              prop="destaddressset "
            >
              <el-select
                v-model="editForm.destaddressset"
                multiple
                collapse-tags
                placeholder="请选择目的地址集(支持多选)"
                style="295px"
              >
                <el-option
                  v-for="item in sourceaddresssetOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

data

  data(){
    return{
        editForm: {
            sourceaddressset: [],
            destaddressset: [],
        }
     }
  }

computed

  computed: {
    sourceaddressset() {
      return this.editForm.sourceaddressset;
    },
    destaddressset() {
      return this.editForm.destaddressset;
    }
  },

watch

  watch: {
    sourceaddressset(val, OldVal) {
      console.log(val,OldVal,'sourceaddressset')
      getdiabledSelectList(val, OldVal, "id", this.sourceaddresssetOptions);
    },
    destaddressset(val, OldVal) {
      getdiabledSelectList(val, OldVal, "id", this.sourceaddresssetOptions);
    }
  },

引入工具getdiabledSelectList

因为watc里面使用了一个函数getdiabledSelectList

import {getdiabledSelectList} from "@/utils/unshake";

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
}

效果