0


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

改动点

<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


本文转载自: https://blog.csdn.net/qq_37570710/article/details/129357569
版权归原作者 水下五米 所有, 如有侵权,请联系我们删除。

“el-select 多选框使用 以及回显默认选中说明”的评论:

还没有评论