el-select 多选框使用以及回显默认选中说明

原创已于 2023-03-07 15:40:34 修改 · 9.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2023-03-06 11:07:50 首次发布

vue 专栏收录该内容

5 篇文章

订阅专栏

文章讲述了如何在Vue项目中使用ElementUI的el-select组件实现多选功能，并通过v-model绑定数组来实现回显。当后台传递的列表有值时，前端页面能显示已选中的选项。同时建议读者参考Element官方文档以了解更多用法。

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

改动点

<el-select 添加属性 multiple，

v-model= 绑定的必须是个数组，在data中定义好，

回显的时候，后台传递数组有值就能显示多个选中的。

              <el-row>
                <el-col :span="24">
                  <elian-table-form-item prop="orgRoles" label="用户角色类型">
                    <el-select
                      multiple
                      v-model="form.orgRoles"
                      placeholder="请选择">
                      <el-option
                        v-for="item in roleTypeDic"
                        :key="item.roleId"
                        :label="item.roleName"
                        :value="item.roleId"
                      >
                      </el-option>
                    </el-select>
                  </elian-table-form-item>
                </el-col>
              </el-row>


  data() {
    return {
      roleTypeDic: [
                    {roleId:'01',roleName:'经理'},
                    {roleId:'02',roleName:'销售'}
                    ], // 这边可以动态后台查询
      form: {
        orgRoles:[],  // 这个里面是roleId 数组，后台获取到list后页面会直接显示
      },

    };
  },

后台

// 后台list 有值页面就会显示已选中的
List<String>orgRoles = ArrayList();
orgRoles.add("01"); 
orgRoles.add("02");

遇到问题建议多看element官网文章，下拉框单选、多选、输入检索都有案例

学习来源： el-select 多选框使用以及回显默认选中说明_el-select多选回显_A.X.C的博客-CSDN博客

官方文档： Element - The world's most popular Vue UI framework

el-select 多选框使用 以及回显默认选中说明

el-select 多选框使用以及回显默认选中说明