VUE3下拉多选和单选:

<Multiselect v-model="selectedList"  mode="tags" :options="optionsList" 
                        track-by="name" label="name"
                        :hideSelected="false"
                      :caret="false"
                      :close-on-select="false"
                      :searchable="true">
            
                </Multiselect>
                <view style="height: 50rpx;"></view>
                <Multiselect
                     v-model="selectedList"
                     :options="optionsList"
                         mode="tags"
                          label="name" 
                   />    

单选:
                 <Multiselect
                      v-model="selected"
                      :options="options"
                      mode="single"
                    /> 

    import Multiselect from '@vueform/multiselect'

...

components: {
            Multiselect

},

setup() {
            let optionsList = reactive([{
                    name: "Vence",
                    value: 1
                },
                {
                    name: "Job",
                    value: 2
                },
                {
                    name: "Jack",
                    value: 3
                },
                {
                    name: "Jack2",
                    value: 4
                },
            ]);
            let options = reactive([1, 2, 3]);
            let selected = reactive()
            let selectedList = reactive(null)

        return{...}

}...

 "dependencies": {"@vueform/multiselect":"^2.6.0"}

参考:

Vue-Multiselect | Vue Select Library

GitHub - vueform/multiselect: Vue 3 multiselect component with single select, multiselect and tagging options (+Tailwind CSS support).

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值