树形插件 vue-treeselect 基本使用
vue-treeselect 是一个多选组件,具有对 Vue.js嵌套选项支持。
- 支持嵌套选项的单选和多选
- 模糊匹配
- 异步搜索
- 延迟加载(仅在需要时加载深度选项的数据)
- 键盘支持(使用Arrow Up & Arrow Down键导航,使用键选择选项Enter等)
- 丰富的选项和高度可定制的
- 支持 多种浏览器
需要Vue 2.2+
简单使用:
<!-- Vue SFC --> <template> <div style="width: 250px;margin-left:200px;margin-top: 30px"> 大飞:vue-treeselect 测试demo: <br /> { id: '1', label: '名字',children:[] }, <treeselect v-model="value" placeholder="请选择" :clearable="false" :disable-branch-nodes="true" :options="options" @select="feiSelect" /> </div> </template> <script> // import the component import Treeselect from '@riophae/vue-treeselect' // import the styles import '@riophae/vue-treeselect/dist/vue-treeselect.css' export default { // register the component components: { Treeselect }, data() { return { value: null,// define the default value options: [ // define options { id: '1', label: 'Level one 1', children: [ { id: '1-1', label: 'Level two 1-1', children: [ { id: '1-1-1', label: 'Level three 1-1-1', }, ], }, ], }, ], } }, methods: { feiSelect(node, instanceId) { // node 里面是 {id,label} 数据, 如果选择了父级,里面有children console.log("DaFei--DaFei--DaFei--DaFei--DaFei--DaFei--DaFei--",node); console.log("DaFei--DaFei--DaFei--DaFei--DaFei--DaFei--DaFei*******这是键",node.id); console.log("DaFei--DaFei--DaFei--DaFei--DaFei--DaFei--DaFei*******这是标签",node.label); }, } } </script>
完整树形结构数据:
options: [ // define options { id: '1', label: 'Level one 1', children: [ { id: '1-1', label: 'Level two 1-1', children: [ { id: '1-1-1', label: 'Level three 1-1-1', }, ], }, ], }, { id: '2', label: 'Level one 2', children: [ { id: '2-1', label: 'Level two 2-1', children: [ { id: '2-1-1', label: 'Level three 2-1-1', }, ], }, { id: '2-2', label: 'Level two 2-2', children: [ { id: '2-2-1', label: 'Level three 2-2-1', }, ], }, ], }, { id: '3', label: 'Level one 3', children: [ { id: '3-1', label: 'Level two 3-1', children: [ { id: '3-1-1', label: 'Level three 3-1-1', }, ], }, { id: '3-2', label: 'Level two 3-2', children: [ { id: '3-2-1', label: 'Level three 3-2-1', }, ], }, ], }, ],View Code
效果图如下:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。