[element-ui]el-selected的衍生操作:在v-model上显示value和label的拼接

效果图

思路

1. 给请求的结果设置不同的显示类型
   • 下拉框显示的value和label值
   • 设置选中值的时候显示的对应的值(value和label拼接起来)
2. 当选中的时候,value就会显示拼接过的字符串

注意事项

如果这个地方做请求参数的时候,要做剪切,只取value值!!! 切记

---

实现过程

1. 接口处理

// 获取结算账户
getListPayBank(){
  apiListPayBank(this.config.listPayBank,res=>{
    let {errcode, data} = res.data;
    if(errcode === 0){
      data.data.forEach((item)=>{
        item.value2 = item.payBankAcctNo;// 触发下拉时,显示的value值
        item.value = item.payBankAcctNo+'_'+item.acctName;// 点击下拉的option时,实际显示的值
        item.label = item.acctName;// 触发下拉时,显示的label值
      })
      this.filter.payBankAcctNo = data.data;
    }
  })
},

2. html显示

  
    
      {{ item.value2 }}
      {{ item.label }}
    
  

大功告成 ?