插件名称 | vue-jstree |
---|---|
发布时间 | 2020年12月3日 |
插件作者 | zdy1988 |
Vue.js 2应用程序的交互式树结构组件。
# NPM
$ npm install vue-jstree --save
安装并导入树视图组件。
import VJstree from 'vue-jstree'
创建一个新的树视图。
<v-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>
new Vue({
data: {
data: [
{
"text": "Same but with checkboxes",
"children": [
{
"text": "initially selected",
"selected": true
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-danger"
},
{
"text": "initially open",
"icon": "fa fa-folder icon-state-default",
"opened": true,
"children": [
{
"text": "Another node"
}
]
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-warning"
},
{
"text": "disabled node",
"icon": "fa fa-check icon-state-success",
"disabled": true
}
]
},
{
"text": "Same but with checkboxes",
"opened": true,
"children": [
{
"text": "initially selected",
"selected": true
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-danger"
},
{
"text": "initially open",
"icon": "fa fa-folder icon-state-default",
"opened": true,
"children": [
{
"text": "Another node"
}
]
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-warning"
},
{
"text": "disabled node",
"icon": "fa fa-check icon-state-success",
"disabled": true
}
]
},
{
"text": "And wholerow selection"
}
]
},
methods: {
itemClick (node) {
console.log(node.model.text + ' clicked !')
}
}
})
Props :
props: {
data: {type: Array},
size: {type: String, validator: value => ['large', 'small'].indexOf(value) > -1},
showCheckbox: {type: Boolean, default: false},
wholeRow: {type: Boolean, default: false},
noDots: {type: Boolean, default: false},
multiple: {type: Boolean, default: false},
allowBatch: {type: Boolean, default: false},
textFieldName: {type: String, default: 'text'},
valueFieldName: {type: String, default: 'value'},
async: {type: Function},
loadingText: {type: String, default: 'Loading...'},
draggable: {type: Boolean, default: false},
klass: String
},