antdv的autoComplete跳坑记

459 阅读1分钟

autoComplete的这个组件在使用的时候每次都会出现前后带空格的问题

贴代码

 <a-auto-complete :defaultActiveFirstOption="false" @select="selectId" :filterOption="false" placeholder="请输入..." > 
   <template slot="dataSource">
      <a-select-option v-for="i in list" :key="i.id" :value="i.username">
        {{ i.username }}
      </a-select-option>
    </template>
</a-auto-complete>

dataSource返回的是一个list,官方文档的这个是个[searchText, searchText.repeat(2), searchText.repeat(3)]这种的单个String组成的数组,只能使用slot插槽

输入框前后有空格的原因是,首先很多人习惯性格式化代码,导致a-select-option是分行显示的,以及{{}}内也是前后拼接空格的

解决办法,一行显示,去掉所有不必要的空格

<a-select-option v-for="i in list" :key="i.id" :value="i.username">{{i.username}}</a-select-option>