树形结构下拉组件vue-treeselect
vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持。具有嵌套选项支持的单个和多个选择模糊匹配异步搜索延迟加载(仅在需要时加载深层选项的数据)键盘支持(使用Arrow Up&Arrow Down键导航,使用键选择选项Enter等)丰富的选项和高度可定制支持各种浏览器https://www.vue-treeselect.cn/一、基本使用流程1、首先npm’安装依赖npm i
·
vue-treeselect是一个多选组件,具有对Vue.js的嵌套选项支持。
具有嵌套选项支持的单个和多个选择
模糊匹配
异步搜索
延迟加载(仅在需要时加载深层选项的数据)
键盘支持(使用Arrow Up&Arrow Down键导航,使用键选择选项Enter等)
丰富的选项和高度可定制
支持各种浏览器
https://www.vue-treeselect.cn/
一、基本使用流程
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、使用
<treeselect
:options="options" //接受数组
placeholder="请选择上级菜单"
v-model="form.parentId"
/>
几个常用的属性:
1、禁用控件:在标签加disabled属性为true
2、多选控件:在标签加multiple属性为true
3、禁用分支:在树结构数据中与label平级的地方添加isDisabled:true
更多推荐
已为社区贡献1条内容
所有评论(0)