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

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
}

这样就解决了

原因

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

相关推荐
icr几秒前
React Fiber和React:diff 算法
前端
_未完待续2 分钟前
框架实战指南-错误处理
前端·vue.js
xianxin_4 分钟前
HTML 锚点
前端
Sean_summer8 分钟前
暑期第二周
前端·数据库·python
_未完待续14 分钟前
框架实战指南-组件参考
前端·vue.js
李文旺14 分钟前
图片加载优化-Nextjs与webpack源码
前端·react.js
不想当小卡拉米14 分钟前
高德地图上marker过多(超过3000个)渲染卡顿过慢问题解决
前端
dalancon17 分钟前
WMShell初始化
前端
半花18 分钟前
【Vue】通信组件
前端·vue.js
劫大大19 分钟前
前端开发公众号或服务号,本地怎么与后端测试服接口打通呢
前端·微信