Vue踩坑之 el-select下拉框多选,选择后赋值成功,输入框不显示选中的值

问题描述:
多选下拉框,选中列表中的选项,但输入框不显示已经选中的数据并且下拉框中已选中的数据不是选中状态。

问题原因:
Vue 无法监听动态新增的属性的变化。

问题解决:
方法一: 在el-select选框组件中绑定change事件,如下:

changeData() {
	this.$nextTick(() => {
   		this.$forceUpdate()
	})
}

方法二:change事件中使用$set来对属性赋值,如下:

changeData(val) {
	this.$set(this.formData, this.formData.id, val.value)
}
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue3和ElementUIel-select下拉框多选,你可以通过以下步骤来回显多选的数据: 1. 在data中定义一个数组selectedOptions,用于存储选择的多个选项的。 2. 在el-select的v-model绑定selectedOptions数组,实现多选功能。 3. 设置el-select的multiple属性为true,启用多选模式。 4. 在el-option的v-model绑定selectedOptions数组,表示该选项是否被选中。 5. 在mounted生命周期函数中初始化selectedOptions数组,将需要回显的多选项的添加到该数组中。 以下是示例代码: ```html <template> <el-select v-model="selectedOptions" multiple placeholder="请选择" style="width: 200px;"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :selected="selectedOptions.indexOf(item.value) > -1"> </el-option> </el-select> </template> <script> export default { data() { return { selectedOptions: [], // 存储选择的多个选项的 options: [ // 下拉框选项 { value: 'option1', label: '选项一' }, { value: 'option2', label: '选项二' }, { value: 'option3', label: '选项三' }, { value: 'option4', label: '选项四' } ] }; }, mounted() { // 初始化selectedOptions数组,将需要回显的多选项的添加到该数组中 this.selectedOptions = ['option1', 'option2']; } }; </script> ``` 在上述代码中,我们使用selectedOptions数组来存储选择的多个选项的,然后在el-select的v-model中绑定该数组,实现多选功能。我们还设置了el-select的multiple属性为true,启用多选模式。在el-option中,我们使用v-model绑定selectedOptions数组,表示该选项是否被选中。在mounted生命周期函数中,我们初始化selectedOptions数组,将需要回显的多选项的添加到该数组中。这样,下拉框就可以回显多选的数据了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值