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 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: el-select 默认选中的 option 是由你在绑定的数据中指定的。通常情况下,你需要在绑定的数组中找到默认选中的那一项,并给它添加一个特殊的属性(如 selected)来表示它是默认选中的。然后在 el-select使用 v-model 指令绑定到这个属性上。 ### 回答2: el-select是基于Element UI框架开发的下拉择控件,可以通过设置默认项来满足特定的需求。下面是关于el-select默认选中的option的详细解释: 首先,el-select组件的默认选中项可以通过v-model属性来设置。将选中项的值赋给v-model就可以实现默认选中效果。例如: ```html <el-select v-model="selectedOption"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> <script> export default { data() { return { options: [{ label: '项1', value: 'option1' }, { label: '项2', value: 'option2' }, { label: '项3', value: 'option3' }], selectedOption: 'option2' } } } </script> ``` 在这个例子中,将v-model绑定到selectedOption,将selectedOption的初始值设置为’option2',就可以实现默认选中项2’的效果。可以根据自己的需求修改v-model的绑定值,就可以实现不同的默认选中项。 除了使用v-model属性来设置默认选中项,还可以在每个项上添加selected属性来实现默认选中效果: ```html <el-select> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :selected="item.value === 'option2'"></el-option> </el-select> ``` 使用这种方法,可以将每个项的selected属性设置为true或false以决定哪个项被默认选中。 总之,el-select可以通过v-model属性或selected属性来设置默认选中项。根据不同的需求可以择合适的方式实现这个功能。 ### 回答3: el-select组件是Element UI中常用的下拉择框组件之一,在使用el-select进行数据择时,常常需要设置默认选中的option。 el-select组件提供了两种方式来设置默认选中的option: 1. 通过v-model绑定数据 使用v-model绑定数据时,可以将需要默认选中的option的value值赋给v-model绑定的数据。例如: ```html <el-select v-model="selectedOption"> <el-option label="第一项" value="1"></el-option> <el-option label="第二项" value="2"></el-option> <el-option label="第三项" value="3"></el-option> </el-select> ``` ```javascript data() { return { selectedOption: '2' } } ``` 上述代码中,我们将el-select的v-model绑定到了selectedOption数据上,并将value值为'2'的option设置为默认选中。 2. 通过设置el-select的default-first-option属性 el-select组件提供了default-first-option属性,当该属性设置为true时,会默认选中第一个option。例如: ```html <el-select v-model="selectedOption" default-first-option> <el-option label="第一项" value="1"></el-option> <el-option label="第二项" value="2"></el-option> <el-option label="第三项" value="3"></el-option> </el-select> ``` ```javascript data() { return { selectedOption: '' } } ``` 上述代码中,我们将default-first-option属性设置为true,即默认选中第一个option。同时,由于v-model绑定的数据为selectedOption,所以在初始化时,selectedOption的值为空。因此,当el-select组件渲染时,将默认选中第一个option。 总的来说,el-select组件提供了两种方式来设置默认选中的option。以上两种方式,都是通过对el-select绑定的数据进行处理来实现的,也可以根据实际需要择合适的方式来进行设置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值