el-select多选模式下默认填充的数据不能被删除

510 阅读1分钟

需求说明

上级账号下发给下级账号的数据默认填充进el-select,且默认填充数据不可被删除,效果如下

演示.gif

实现思路

要实现这一需求需要同时满足:

默认值在下拉选择框里不可被操作
默认值在input框里不能被删除

实现过程

1、实现思路1可以通过给el-option加disabled的方式

  <el-option v-for="item in itemSon.checkItemOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="checkItemDisabled(item.value, index, indexSon)">
  </el-option>
checkItemDisabled (value, index, indexSon) {
  return this.dataForm.list[index].list[indexSon].checkItem_clone.includes(value.toString())
}

checkItemDisabled方法根据实际情况修改

2、实现思路2,在实现思路1之后再input框里点击默认值tag后面的删除按钮默认值仍会被删除,我通过删除后在原位置将被删除的值重新加回的方式实现了tag不可被删除的效果。需要用到element-ui提供的el-select的remove-tag属性

<el-select style="width: 100%;" size="mini" v-model="itemSon.subjectIds" placeholder="先选择主体类型" collapse-tags multiple clearable filterable @focus="subjectChange(index, indexSon)" @change="subjectChange(index, indexSon)" @remove-tag="addRemovedItem($event, index, indexSon)">
  <el-checkbox style="margin-left: 20px;margin-top: 10px;" v-model="itemSon.checked" @change='selectAll(index, indexSon)'>全选</el-checkbox>
  <el-option v-for="item in itemSon.subjectList" :key="item.id" :label="item.subjectName" :value="item.id" :disabled="checkItemDisabled1(item.id, index, indexSon)"></el-option>
</el-select>
addRemovedItem (e, index, indexSon) {
  if (this.dataForm.list[index].list[indexSon].subjectIds_clone.includes(e)) {
    let defaultIndex = this.dataForm.list[index].list[indexSon].subjectIds_clone.indexOf(e) // 获取默认值在数组中的下标
    this.dataForm.list[index].list[indexSon].subjectIds.splice(defaultIndex, 0, e) // 将要删除的值插入到默认值对应的下标位置
    return false
  } else {
    return true
  }
},

PS:代码是从项目中直接复制过来的,相关变量需要再不同场景下进行修改。