插件名称 | vue-tree |
---|---|
版本号 | v3.0.3 |
发布时间 | 2020年12月22日 |
插件作者 | grapoza |
一个简单而功能齐全且高度可定制的Vue树形视图组件。
# Yarn
$ yarn add @grapoza/vue-tree
# NPM
$ npm i @grapoza/vue-tree
1.导入vue树。
import TreeView from "@grapoza/vue-tree"
2.注册组件。
export default {
components: {
TreeView
}
}
3.将树视图组件添加到应用程序模板。
<template>
<tree-view id="example" :initial-model="dataModel"></tree-view>
</template>
4.将节点添加到树视图。
export default {
components: {
TreeView
},
data() {
return {
dataModel: [
{id: "numberOrString", label: "Root Node", children: [
{id: 1, label: "Child Node"},
{id: 2, label: "Second Child"}]
}
]
}
}
}
5.所有默认树道具。
initialModel: {
type: Array,
required: true
},
modelDefaults: {
type: Object,
required: false,
default: function () { return {}; }
},
selectionMode: {
// none, 'single', 'selectionFollowsFocus', or 'multiple'
type: String,
required: false,
default: SelectionMode.None,
validator: function (value) {
return Object.values(SelectionMode).includes(value);
}
},
skinClass: {
type: String,
required: false,
default: 'default-tree-view-skin',
validator: function (value) {
return value === null || !value.match(/\s/);
}
}
v3.0.3 (06/21/2021)
v3.0.2 (06/02/2021)
v3.0.1 (05/17/2021)
v3.0.0 (03/23/2021)