Vue-multiselect:踩坑记录

                            <multiselect :disabled="isdisabled" style="min-width:80%;max-width:80%;"
                                         :allow-empty="false"
                                         v-model="o.projectObj"
                                         title="enter the project"
                                         :placeholder="promptShow?'':'project'"
                                         track-by="ProjectShortNameEN"
                                         label="ProjectShortNameEN"
                                         :internal-search="false"
                                         :show-no-results="false"
                                         :show-labels="false"
                                         :options="o.projectDataObj.data"
                                         :loading="o.projectDataObj.loading"
                                         @input="setProject($event,o)"
                                         @search-change="findProject($event,o)">
<!--                                <template slot="singleLabel" slot-scope="{ option }">-->
<!--                                    <span class="custom__tag">{{option.ProjectShortNameEN}}</span>-->
<!--                                </template>-->
                                <template slot="clear" slot-scope="props">
                                    <div class="multiselect__clear display_none"
                                         v-if="o.projectObj"
                                         @mousedown.prevent.stop="o.projectObj=null;o.projectUUID=null;o.projectName=null"
                                         title="remove this option"></div>
                                </template>
                            </multiselect>

记录原因:
当时数据查询时得到了三条数据,但是自动输入提示框中只显示了一条。

排查记录:
经反复测试后,发现查询得到的数据,在显示时还要做内部的显示过滤,什么意思呢,就是比如你查询的字符串为 5,后代查询数据库得3条数据,组件中展示的字段为ProjectShortNameEN,那么组件内部会根据查询字符串,在所得对象的展示字段中做过滤,过滤掉展示字段中没有5的对象,这就导致了最后显示的数据与查询到的数据不一致问题

解决方案:
添加 :internal-search=“false”,这里有一个坑,在官方api中显示的字段名称为 internalSearch,但是组件传递时,必须把单词之间用短横线连接,驼峰命名会导致数据传递无效,
还有一个小坑,传递字段前要添加:冒号,否则组件内一律视为字符串。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值