插件名称 | vue-cascader-select |
---|---|
发布时间 | 2020年4月11日 |
插件作者 | NeoCoast |
级联选择是一个动态选择框增强组件,允许用户从多级级联下拉组件中选择选项。
# Yarn
$ yarn add vue-cascader-select@latest
# NPM
$ npm install vue-cascader-select@latest --save
1.安装并导入库。
import Vue from 'vue';
import VueCascaderSelect from 'vue-cascader-select';
2.注册级联选择。
Vue.use(VueCascaderSelect);
// 或
export default {
name: 'MyComponent',
components: {
VueCascaderSelect,
},
...
};
3.将Cascader Select插入到您的应用程序模板中。
<template>
<vue-cascader-select
:options="options"
:onClear="(val) => value = ''"
:onSelect="(val) => value = val"
:value="value"
/>
</template>
4.为级联下拉列表定义层次结构选项。
[
{
label: 'JavaScript',
value: 'javascript',
disabled: true,
options: [
{ label: 'Vue', value: 'Vue' },
{ label: 'React', value: 'React' },
{ label: 'Angular', value: 'Angular' },
],
},
{
label: 'Backend',
value: 'Backend',
disabled: true,
options: [
{ label: 'Ruby on Rails', value: 'Ruby on Rails' },
{ label: 'NodeJS', value: 'NodeJS' },
{ label: 'Elixir', value: 'Elixir' },
],
},
];
5.所有默认props
placeholder: {
type: String,
default: 'Please select...',
},
options: {
type: Array,
required: true,
validator: value => validateOptions(value),
},
onClear: {
type: Function,
required: true,
},
onSelect: {
type: Function,
required: true,
},
value: {
type: String,
required: true,
}