[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显示

<el-form-item label="结算账户" prop="payBankAcctNo">
  <el-select v-model="form.payBankAcctNo" @change="choosePayBankAcctNo" placeholder="请选择" class="display-block">
    <el-option v-for="(item, i) in listPayBankAcctNo" :key="i" :label="item.value" :value="item.value">
      <span style="float: left">{{ item.value2 }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
    </el-option>
  </el-select>
</el-form-item>

大功告成 ?