Element-UI下拉多选框回显

1、v-model绑定下拉框

        <el-form-item label="项目成员" prop="members">
          <el-select v-model="form.members" placeholder="请选择项目成员" multiple clearable
            :style="{width: '100%'}" @change="userNameSelect">
            <el-option v-for="(item, index) in membersOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled">el-option>
          el-select>
        el-form-item>

2、data中定义

      membersOptions: [{
        "label": "选项一",
        "value": "1"
      }, {
        "label": "选项二",
        "value": "2"
      }, {
        "label": "选项三",
        "value": "3"
      }]

3、在触发事件中写如下代码。

    //下拉多选获取lable
    userNameSelect(value){
      var name=""
      for(var i=0;i<value.length;i++){
          this.membersOptions.find((item)=>{//这里的membersOptions就是上面遍历的数据源
          if(item.value === value[i]){
            name+=item.label+","           
          }       
      });
      }
      this.form.userName=name.slice(0,-1)
    }

你可能感兴趣的:(ui)