項目場景:
<el-table-column label="稅率" prop="TaxRate" width="180" align="center" show-overflow-tooltip><template slot-scope="{row, $index}"><el-form-item :prop="'InquiryItemList.' + $index + '.TaxRate'" label-width="0"><el-select v-model="row.TaxRate" size="small" placeholder="請選擇開票稅率" @change="rateItemChange(row.TaxRate,$index,row)"><el-option v-for="(item,index) in taxRateOptions" :key="index" :label="item.Label" :value="item.Value"></el-option></el-select></el-form-item></template></el-table-column>
問題描述:
el-select選中值,數據已經改變但選擇框中不顯示值,需要其他輸入框輸入值才顯示這個選擇框才會顯示剛才選中的值
解決方案:
給el-select標簽添加一個change事件
@change=“rateItemChange(row.TaxRate,$index,row)”
第一個值為選擇的數值,暫時用不到,第二個值為數據的下標,用于事件改變值時提供坐標,第三個值為改變后的整條數據
methods: {rateItemChange(val, index, item) {console.log("獲取數據值,重新賦值", val, index,item);this.$set(this.offerBatchModifyData.InquiryItemList, index, item);console.log(this.offerBatchModifyData);},
}
this.offerBatchModifyData是我的詳情數據,InquiryItemList是數組,
this.$set方法,第一個值為改變誰,第二個值為改變值的坐標,第三個則是改變后數據,重新賦值給詳情數據
可以根據自己的數據做相應調整,這樣就可以正常顯示選中的數據了