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).

猜你喜欢

转载自blog.csdn.net/qq_38687592/article/details/129531605