el-select选中某一个之后，再选择第二个，下拉框的选中光标不能取消第一次选中的选项

希图2025-03-04 18:55

el-selet,template部分

js 复制代码

<el-select v-model="condition.element.id" placeholder="请选择" @change="changeIfCoditionElement($event, ruleIndex, index)">
	 <el-option v-for="(element) in allElements" :key="element.id"  :label="element.title" :value="element.id" />
</el-select>

condition的值

js 复制代码

condition = {
    element: {
        id:""
    },
    state: '',
    choiceIndex: -1,
    startScore: null,
    endScore: null
}

allElements

js 复制代码

const allElements = computed(() => {
	return props.questionSettings.pages
		.flatMap(page => page.elements)
		.filter(element => element.type !== 'panel' && element.type !== 'html')
});

changeIfCoditionElement($event, ruleIndex, index)

ini 复制代码

const changeIfCoditionElement = (elementId, ruleIndex, index) => {
	// 改变如果条件的题目，则重置选择状态
	logicRules[ruleIndex].ifConditions[index].state = ''      
  ifCoditionElement.value = allElements.value.find(el => el.id === elementId)
	logicRules[ruleIndex].ifConditions[index].elementId = ifCoditionElement
	...
}

Bug

第一次点击选择下拉选项A,下拉框显示选项A，下拉框的选项列表中选项A变蓝第二次点击选择下拉选项B,下拉框中显示选项A，下拉框的选项列表中选项A和选项B都变蓝

预期

第二次点击选择下拉选项B,下拉框中出现选项B，下拉框的选择列表中只有选项B变蓝

解决办法

1.去掉condition中的element对象，换成elementId并赋值为空字符串

js 复制代码

{
    elementId: "", 
    ...
}

2.在change事件中保存elementId而不是原来的element

js 复制代码

const changeIfCoditionElement = (elementId, ruleIndex, index) => {
	// 改变如果条件的题目，则重置选择状态
	logicRules[ruleIndex].ifConditions[index].state = ''
	logicRules[ruleIndex].ifConditions[index].elementId = elementId
}

这样就解决了

原因

但是，我并不知道这是什么原因，如果有大佬知道，还请留言。