Element-UI下拉多选框回显

程序员佳倩

于 2024-08-27 08:30:00 发布

阅读量218

点赞数 1

文章标签： ui

本文链接：https://blog.csdn.net/python0328/article/details/141547780

版权

        <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>

      membersOptions: [{
        "label": "选项一",
        "value": "1"
      }, {
        "label": "选项二",
        "value": "2"
      }, {
        "label": "选项三",
        "value": "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)
    }