iview使用select封裝的組件添加filterable屬性有空格


問題:

項目使用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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM