可自定义和可搜索的双列表框组件,可增强应用程序上的多选体验。
1.导入多选双重列表框。
import Vue from 'vue'
import MultiselectListbox from 'vue-multiselect-listbox'
import 'vue-multiselect-listbox/dist/vue-multi-select-listbox.css';
2.注册组件。
Vue.component('v-multiselect-listbox', vMultiselectListbox)
3.将组件添加到模板,并在JS数组或对象数组中定义选项。
<v-multiselect-listbox
:options="['Option 1', 'Option 2']">
</v-multiselect-listbox>
// or
<v-multiselect-listbox
:options="[{label: 'Option 1', language: 'js'}, {label: 'Option 2', language: 'css'}]"
:reduce-display-property="(option) => option.label"
:reduce-value-property="(option) => option.language"
</v-multiselect-listbox>
4.所有可能的 props 。
value: {
type: Array,
default() {
return [];
},
},
options: {
type: Array,
default() {
return [];
},
},
searchOptionsPlaceholder: {
type: String,
default() {
return 'Search';
},
},
selectedOptionsPlaceholder: {
type: String,
default() {
return 'Search';
},
},
reduceDisplayProperty: {
type: Function,
default: (value) => value,
},
reduceValueProperty: {
type: Function,
default: (value) => value,
},
noOptionsText: {
type: String,
default: '',
},
selectedNoOptionsText: {
type: String,
default: 'Select',
},
noOptionsFoundText: {
type: String,
default: 'No options found',
},
noSelectedOptionsFoundText: {
type: String,
default: 'No options found',
},
showSelectAllButtons: {
type: Boolean,
default: true,
},
searchInputClass: {
type: String,
default: '',
}