需求说明
上级账号下发给下级账号的数据默认填充进el-select,且默认填充数据不可被删除,效果如下
实现思路
要实现这一需求需要同时满足:
默认值在下拉选择框里不可被操作
默认值在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
}
},