级联选择是一个动态选择框增强组件，允许用户从多级级联下拉组件中选择选项。

安装和下载：

# 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,
}

---

官网：https://github.com/NeoCoast/vue-cascader-select

演示：https://www.vue365.cn/code_demo.php?id=167

GitHub下载：https://github.com/NeoCoast/vue-cascader-select/archive/master.zip