插件名称 | vue3-blocks-tree |
---|---|
版本号 | v0.5.2 |
发布时间 | 2021年4月20日 |
插件作者 | megafetis |
blocks-tree是Vue 3组件,用于在应用程序中生成可折叠和可检查的组织树。
# Yarn
$ yarn add vue3-blocks-tree
# NPM
$ npm i vue3-blocks-tree
1.导入blocks-tree。
import {createApp} from 'vue';
import VueBlocksTree from 'vue3-blocks-tree';
import 'vue3-blocks-tree/dist/vue3-blocks-tree.css';
let defaultoptions = {
// OPTIONS HERE
}
createApp(App).use(VueBlocksTree, defaultoptions)
2.创建一个基本的组织树。
<blocks-tree :data="treeData"></blocks-tree>
import { defineComponent,ref,reactive } from 'vue';
export default defineComponent({
setup() {
let selected = ref([]);
let treeOrientation = ref("0");
let treeData = reactive({
label: 'root',
expand: true,
some_id: 1,
children: [
{ label: 'child 1', some_id: 2, },
{ label: 'child 2', some_id: 3, },
{
label: 'subparent 1',
some_id: 4,
expand: false,
children: [
{ label: 'subchild 1', some_id: 5 },
{
label: 'subchild 2',
some_id: 6,
expand: false,
children: [
{ label: 'subchild 11', some_id: 7 },
{ label: 'subchild 22', some_id: 8 },
]
},
]
},
]
});
return {
treeData,
}
}
})
3.可用的组件props。
data: {
type: Object,
required: true
},
props: {
type: Object,
default: () => (<PropsType>{
label: 'label',
expand: 'expand',
children: 'children'
})
},
horizontal: Boolean,
collapsable: Boolean,
renderContent: Function,
labelWidth: [String, Number],
labelClassName: [Function, String],
4. 事件.
v0.5.2(05/16/2021)