element 下拉框常見問題
阿新 • • 發佈：2020-12-26
技術標籤：工作中遇到到問題
基本用法
<body>
<div id="app">
<el-select v-model="value" placeholder="請選擇">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option> 
- 下拉框顯示的是key，也就是這裡的label。當選中一個選項時，會繫結對應的value值。
- 同理如果給定一個value值，則會找到對應的key值進行顯示。如果找不到對應的key，會將value轉成字串型別，並顯示
問題1：下拉框顯示的值不對
<body>
<div id="app">
<el-select v-model="value" placeholder="請選擇">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
< 
遇到的問題與上面這個例子很相似。從後臺獲取當前下拉框的選中值，並顯示。當時後臺給我返回了一個id，但是這個id是字串型別的（需要一個整型），然後下拉框按照邏輯尋找對應的key，因為根本不存在這個value，所以就把這個id給顯示了
問題2 ：下拉框有值卻無法選中
這個bug就很莫名其妙。當時用兩個下拉框，下拉選項值都是從後臺獲取到的。左邊下拉框下拉選項可以正常選中，結果右邊的下拉框無法選中；最主要的是這兩個下拉框程式碼基本一樣。然後問了下度娘，果然有解決方案
<el-form-item label="製造BOM版本">
<el-select v-model="records.recordForm.bomId" placeholder="請選擇" :readonly="dialogTitle=='技術資訊檢視'" @change="$forceUpdate()">
<el-option v-for="item in bomList" :label="item.versionNo" :value="item.bomId" :key="item.bomId"></el-option>
</el-select>
</el-form-item>
或者
<el-select v-model="records.recordForm.bomId" placeholder="請選擇" :readonly="dialogTitle=='技術資訊檢視'" @change="change">
<el-option v-for="item in bomList" :label="item.versionNo" :value="item.bomId" :key="item.bomId"></el-option>
</el-select>
change(){
this.$forceUpdate()
}
出現這個問題好像是因為下拉框資料是迴圈掉別的介面得來的，因為資料層次太多，render函式沒有自動更新，需手動強制重新整理所以我直接強制重新整理了值，而forceUpdate就是重新render。
注： 這裡的無法選中指的是沒有渲染，但是對應的值已經改變了。所以可以通過change事件來強行渲染