多选框 对应的value label id key

1.value 是选项变化时得到的数据 lable 是下拉框中展示的数据

2.选项变化更改对象的数据 页面实时回显更新 用到$set ,

3.后端要求传id(,分割的字符串) ,返回参数也是id,需要自己遍历转换成名称 用$set 回显

  <el-form-item label="所属经理" prop="vcManagerName" style="">
       <el-select ref="mySelect" class="queryClass" :max-tag-count="1"  multiple clearable                   
        size="small" v-model="ruleForm.vcManagerName" @on-change="selectFund">
               <el-option v-for="item in vcManagerList" :label="item.vcName" 
                   :value="item.vcName" :key="item.id">
                </el-option>
        </el-select>
    </el-form-item>

 vcManagerList:[
              {vcName:'黄忠',id:"huangz"},
              {vcName:'董丽',id:"dongl"},
              {vcName:'翟腾',id:"zhait"},
              {vcName:'席志学',id:"xizx01"},
              {vcName:'蒋丽娟',id:"jianglj"},
              {vcName:'景宏玉',id:"jinghy"},

            ],

//this.seledtedReceipt.vcManager是"xizx01,jianglj,jinghy"

 arr1=this.seledtedReceipt.vcManager.split(',')
              let arr2=[]
              arr1.map(item=>{
                this.vcManagerList.map(it=>{
                  if(item==it.id){
                    arr2.push(it.vcName)
                  }
                })
              })
              this.ruleForm=this.seledtedReceipt
              // this.ruleForm.vcManagerName=arr2
              this.$set(this.ruleForm,'vcManagerName',arr2)

选择所属经理 重新给vcManagerName赋值,转换得到给后端的id字符串

      //选择所属经理
        selectFund(val){
          console.log('val',val);
         
           this.$set(this.ruleForm, 'vcManagerName', val)
          let arrId=[]
          if(val){
            val.map((item)=>{
              this.vcManagerList.map(it=>{
                  if(item==it.vcName){
                    arrId.push(it.id)
                  }
              })   
            })
            this.vcManager=arrId.join(',')
          }else{
            this.vcManager=""
          }
          
        },
相关推荐
bin91531 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云3 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
曦月合一3 小时前
html中iframe标签 隐藏滚动条
前端·html·iframe
奶球不是球3 小时前
el-button按钮的loading状态设置
前端·javascript
kidding7233 小时前
前端VUE3的面试题
前端·typescript·compositionapi·fragment·teleport·suspense
无责任此方_修行中4 小时前
每周见闻分享:杂谈AI取代程序员
javascript·资讯
Σίσυφος19005 小时前
halcon 条形码、二维码识别、opencv识别
前端·数据库
学代码的小前端5 小时前
0基础学前端-----CSS DAY13
前端·css
dorabighead6 小时前
JavaScript 高级程序设计 读书笔记(第三章)
开发语言·javascript·ecmascript
css趣多多6 小时前
案例自定义tabBar
前端