帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

可折叠,可检查的Vue3树形图组件(blocks-tree)

帝国模板之家 2021-04-22 网页特效 评论

组件介绍

blocks-tree是Vue 3组件,在应用程序中生成可折叠和可检查的组织树。

使用方法

1.导入块树。

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.组件默认配置。

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.事件。

@node-click: Click
@node-mouseover: Mouse over
@node-mouseout: Mouse out
@node-expand: Expand nodes
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言