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

这篇具有很好参考价值的文章主要介绍了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://www.toymoban.com/news/detail-538137.html

到了这里，关于el-select 多选框使用以及回显默认选中说明的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

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

相关文章