vue multiple el-select多选框勾选后无响应

在Vue.js应用中遇到el-select多选框选择后无响应的问题,特别是当选项数量较多时。通过分析发现,与选项数量有关,选项少的select能正常响应,而选项多的select则不会更新。解决方法是在select的change事件中调用this.$forceUpdate(),强制Vue实例重新渲染,从而确保选择操作得到正确响应。

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

今天遇到一个问题点,记录一下:在Vue 中使用el-select时选择后无响应,而在选择另一个selec选项t时会一起响应。
代码段:

          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
                <el-option
                  v-for="item in roleOptions"
                  :key
### 如何在 Element Plus 的 `el-select` 组件中正确绑定多选框返回的值 在 Vue.js 中,使用 `v-model` 可以实现双向数据绑定。对于 Element Plus 的 `el-select` 组件,在启用多功能时,可以通过设置属性 `multiple=true` 来允许用户择多个项[^1]。 以下是具体的实现方式: #### 数据准备 首先需要定义一个数组作为可项列表 (`items`) 和另一个用于存储已中的项的数据模型 (通过 `v-model` 绑定)。这些变量应在 Vue 实例的 `data` 属性中声明。 ```javascript export default { data() { return { selectedValues: [], // 存储被中的值 options: [ { value: 'option1', label: 'Option One' }, { value: 'option2', label: 'Option Two' }, { value: 'option3', label: 'Option Three' } ] }; } }; ``` #### HTML 结构 接着配置 `<el-select>` 组件并应用上述数据源以及绑定到目标字段上。 ```html <template> <div> <!-- 启用 multiple 属性支持多 --> <el-select v-model="selectedValues" multiple placeholder="请择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> <!-- 显示当前定的内容 --> <p>您择了:</p> <ul> <li v-for="(val, index) in selectedValues" :key="index">{{ val }}</li> </ul> </div> </template> ``` 此代码片段展示了如何利用 `v-for` 遍历 `options` 数组来动态生成下拉菜单条目,并且通过 `v-model` 将用户的输入同步至 `selectedValues` 这一响应式变量之中。 当用户操作该控件完成择之后,`selectedValues` 即会自动更新为最新的取集合形式表示的结果集。 #### 注意事项 - 如果希望初始状态下某些项目已被预先,则只需提前填充 `selectedValues` 列表即可。 - 对于更复杂的场景比如远程加载数据或者自定义渲染逻辑等需求,可以查阅官方文档获取更多高级特性说明。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

从头学习的老廖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值