問題:
項目使用vue2.6+iview3.0,其中有一個需求是下拉框能夠輸入過濾,iview的select有個filterable屬性可以實現這個效果。但是加上這個屬性后發現選中文字前后都有大量的空格導致選中的條目位置發生了變化。
導致原因:
- option標簽中 {{}} 前后的空格和換行部分被iview讀取了
解決辦法:
將option標簽中換行導致的空格去掉,或者使用label屬性接受option賦值就好了
<!--修改之前問題代碼-->
<Select v-model='value' filterable>
<Option v-for='(dict, index) in dictList' :value="dict.value" :key="index">
{{dict.label}}
</Option>
</Select>
<!--修改之后將option標簽換行的空格去掉就ok了-->
<Select v-model='value' filterable>
<Option v-for='(dict, index) in dictList' :value="dict.value" :key="index">{{dict.label}}</Option>
</Select>
<!--或者使用label屬性-->
<Select v-model='value' filterable>
<Option v-for='(dict, index) in dictList' :value="dict.value" :label="dict.label" :key="index"></Option>
</Select>