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

大功告成 😃