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

原创已于 2023-03-31 08:22:04 修改 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-03-30 19:06:24 首次发布

FAQ 专栏收录该内容

2 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

今天遇到一个问题点，记录一下：在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="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属车间"   >
                <el-select v-model="form.workshopIds" multiple placeholder="请选择所属车间" >
                  <el-option
                    v-for="item in workshopOptions"
                    :key="item.workshopId"
                    :label="item.workshopName"
                    :value="item.workshopId"
                  ></el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>

分析解决：
两个select的一个区别是option数量不一样，workshopIds select选项较多，有十几个，每次选择后无反应，感觉卡住一样，而另一个select选项较少，选择选项后及时响应，同时workshop这个select也同时会响应，似乎没有刷新过来。于是试了下用强制更新视图方法 $f orce U p d a t e v m .$ forceUpdate() 使Vue实例重新渲染后正常。
在select添加change事件中调用 this.$forceUpdate()方法：

   <el-select v-model="form.workshopIds" multiple placeholder="请选择所属车间" @change="change()" >

 change(){
      this.$forceUpdate()
  },

您可能感兴趣的与本文相关的镜像

Kotaemon

AI应用

Kotaemon 是由Cinnamon 开发的开源项目，是一个RAG UI页面,主要面向DocQA的终端用户和构建自己RAG pipeline