Vue的可搜索多选双重列表框

Vue的可搜索多选双重列表框

插件名称:vue-multiselect-listbox

发布时间:2020年7月21日

插件作者:abhimediratta

官网 GitHub下载

可自定义和可搜索的双列表框组件,可增强应用程序上的多选体验。

如何使用它:

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: '',
}
相关插件