vue关于多个下拉框调用同一个数组时,下拉框的值不能重复

五个下拉框,每个下拉框选中的值不能重复,选过的下拉值会置灰,代码如下

vue关于多个下拉框调用同一个数组时,下拉框的值不能重复_第1张图片

五个下拉框必选,数据结构如下

vue关于多个下拉框调用同一个数组时,下拉框的值不能重复_第2张图片

vue关于多个下拉框调用同一个数组时,下拉框的值不能重复_第3张图片

重点是计算与监听相关的属性

vue关于多个下拉框调用同一个数组时,下拉框的值不能重复_第4张图片

下面是封装的方法

//  此为多个下拉框调用同一个数组时,不能选同一个id的值,如果是id则dbSourceId改为'id',dataArray为当前下拉框的数组
export function getdiabledSelect (val, oldVal, dbSourceId, dataArray) {
  dataArray = dataArray.filter((value,key,arr) => {
    if(value[dbSourceId] === oldVal) {
      value.disabled = false
    }else if(value[dbSourceId] === val) {
      value.disabled = true
    }
    return value
  })  
}
 

你可能感兴趣的:(vue多个下拉框唯一性选择,vue下拉)