zdy1988 / Vue Treeselect
A Tree Select Plugin For Vue2.0+
Stars: ✭ 40
Projects that are alternatives of or similar to Vue Treeselect
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+5832.5%)
Mutual labels: tree, select, vue2
Multiselect
Vue 3 multiselect component with single select, multiselect and tagging options.
Stars: ✭ 92 (+130%)
Mutual labels: select, vue2
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件，包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (+290%)
Mutual labels: tree, select
Vue Treeselect
A multi-select component with nested options support for Vue.js
Stars: ✭ 2,347 (+5767.5%)
Mutual labels: tree, select
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (+52.5%)
Mutual labels: select, vue2
select2-to-tree
Select2-to-Tree extends Select2 to support arbitrary level of nesting...
Stars: ✭ 71 (+77.5%)
Mutual labels: tree, select
Algorithms
Java implementation for Introduction to Algorithms book.
Stars: ✭ 58 (+45%)
Mutual labels: tree, select
vue2-data-tree
A tree that data is lazy loaded. Support dragging node, checking node, editing node's name and selecting node.
Stars: ✭ 41 (+2.5%)
Mutual labels: tree, vue2
React Dropdown Tree Select
Lightweight, accessible, customizable and fast Dropdown Tree Select component for React
Stars: ✭ 345 (+762.5%)
Mutual labels: tree, select
Js Tree List
Convert list to tree, managing a tree and its nodes.
Stars: ✭ 30 (-25%)
Mutual labels: tree
Deepdiff
Deep Difference and search of any Python object/data.
Stars: ✭ 985 (+2362.5%)
Mutual labels: tree
Zeus
A high performance, cross-platform Internet Communication Engine. Developed with native socket API. Aim at handling millions of concurrent connections.
Stars: ✭ 30 (-25%)
Mutual labels: select
Ember Searchable Select
Data-down, actions up select-like menu with searching and tagging capabilities.
Stars: ✭ 38 (-5%)
Mutual labels: select
Cracking The Coding Interview
Solutions for Cracking the Coding Interview - 6th Edition
Stars: ✭ 35 (-12.5%)
Mutual labels: tree
Prompt Checkbox
This repository has been archived, use Enquirer instead.
Stars: ✭ 21 (-47.5%)
Mutual labels: select
vue-treeselect
Introduction
A tree plugin for vue2
This Plugin is based on vue-jstree, Some "props" can be used for reference !
DEMO
http://zdy1988.github.io/vue-treeselect
NPM
npm install vue-treeselect
ES6
import VTreeselect from 'vue-treeselect'
new Vue({
components: {
VTreeselect
}
})
Setup
npm install
npm run dev
Usage
<v-tree-select :data="data" value-field-name="id" v-model="selectItem"></v-tree-select>
new Vue({
el: '#app',
data: {
data: [
{
"id": 1,
"text": "Same but with checkboxes",
"children": [
{
"id": 2,
"text": "initially selected",
},
{
"id": 3,
"text": "custom icon",
},
{
"id": 4,
"text": "initially open",
"children": [
{
"id": 5,
"text": "Another node"
}
]
},
{
"id": 6,
"text": "custom icon",
},
{
"id": 7,
"text": "disabled node",
"disabled": true
}
]
},
{
"id": 8,
"text": "Same but with checkboxes",
"children": [
{
"id": 9,
"text": "initially selected",
},
{
"id": 10,
"text": "custom icon",
},
{
"id": 11,
"text": "initially open",
"children": [
{
"id": 12,
"text": "Another node"
}
]
},
{
"id": 13,
"text": "custom icon",
},
{
"id": 14,
"text": "disabled node",
"disabled": true
}
]
},
{
"id": 15,
"text": "And wholerow selection"
}
],
selectItem: null
}
})
API
| Props | Type | Default | Describe |
|---|---|---|---|
| placeholder | String | set placeholder | |
| data | Array | set tree data | |
| size | String | set tree item size , value : 'large' or '' or ''small' | |
| show-checkbox | Boolean | false | set it show checkbox |
| allow-transition | Boolean | true | allow use transition animation |
| whole-row | Boolean | false | use whole row state |
| no-dots | Boolean | false | show or hide dots |
| multiple | Boolean | false | set multiple selected tree item |
| allow-batch | Boolean | false | in multiple choices. allow batch select |
| text-field-name | String | 'text' | set tree item display field |
| value-field-name | String | 'value' | set tree item value field |
| children-field-name | String | 'children' | set tree item children field |
| async | Function | async load callback function , if node is a leaf ,you can set 'isLeaf: true' in data | |
| loading-text | String | 'Loading' | set loading text |
| klass | String | set append tree class |
Data Item Optional Properties
| Name | Type | Default | Describe |
|---|---|---|---|
| icon | String | custom icon css class | |
| opened | Boolean | false | set leaf opened |
| selected | Boolean | false | set node selected |
| disabled | Boolean | false | set node disabled |
| isLeaf | Boolean | false | if node is a leaf , set true can hide '+' |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].