具有嵌套选项支持的单个和多个选择
模糊匹配
异步搜索
延迟加载(仅在需要时加载深层选项的数据)
键盘支持(使用Arrow Up&Arrow Down键导航,使用键选择选项Enter等)
丰富的选项和高度可定制
需要Vue 2.2+
一、基本使用流程
1、首先npm'安装依赖
npm install @riophae/vue-treeselect --save
2、然后在需要使用的组件中引入
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
3、声明组件
components: { Treeselect }
4、使用
:options="dataList" //接受数组
placeholder="请选择上级菜单"
v-model="form.parentId"
/>
二、树结构下拉框示例
:options="optionsMechanism"
placeholder="select...."
v-model="value"/>
data(){
return{
value:null,
optionsMechanism:[{
id: 'fruits',
label: 'Fruits',
children: [ {
id: '',
label: 'Apple ',
isNew: true,
}, {
id: 'grapes',
label: 'Grapes ',
}, {
id: 'pear',
label: 'Pear
Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html:
jQuery EasyUI/TopJUI创建树形表格下拉框
jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建)
js实现可输入的下拉框
...vue自定义下拉框组件
创建下拉框组件 Select.vue