解决el-select下拉框多选在赋完值之后，不能对tag和已选中的值取消掉

朱同學8245

于 2023-02-18 16:51:37 发布

阅读量1.6k

点赞数 1

文章标签： vue.js 前端 javascript 学习

本文链接：https://blog.youkuaiyun.com/weixin_46212682/article/details/129102002

版权

在Vue组件中，当使用el-select并需要动态更新选项时，遇到无法立即显示变化的情况。通过在change事件中添加$forceUpdate()方法，可以强制组件重新渲染，确保选择器的正确刷新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这种是原先的写法

<el-select
	v-model="form.users"
	placeholder="请选择人员"
	style="width: 270px"
	:multiple="true"
>
<el-option
  v-for="item in sblx_ry_all"
  :key="item.userId"
  :label="item.userName"
  :value="item.userId"
/>
</el-select>

需要加上$forceUpdate() 进行强制刷新

	<el-select
		v-model="form.users"
		placeholder="请选择人员"
		style="width: 270px"
		@change = "$forceUpdate()"
		:multiple="true"
	>
	<el-option
	    v-for="item in sblx_ry_all"
	    :key="item.userId"
	    :label="item.userName"
	    :value="item.userId"
	/>
</el-select>