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="width: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="width: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
}

##效果

posted @ 2022-04-11 15:14  爱喝可乐的靓仔  阅读(317)  评论(0编辑  收藏  举报