t-vue-tree
一个基于vue的同步树
ps:当前版本没有做异步树
安装与引入方式:
1.下载安装: npm install t-vue-tree
2.引入(即:注册该组件到vue的组件里):
- 方式1:在个人的vue项目的主js里注册: import T_tree from 't-vue-tree'; Vue.component('Ttree', Ttree); 然后在每个单独的vue文件中就可以直接使用而不用再次注册了。
- 方式2:在各个单独的vue文件引入并注册为一个局部的组件:
<script> import T_tree from 't-vue-tree'; export default { components: { T_tree } } </script>
例子1_一个基础的例子
{{examplesObj[0].bottomShow ? '隐藏代码' : '显示代码'}}
<style>
.demo1-tree-wrapper{
width: 100%;
height: 180px;
}
</style>
<template>
<div class="demo1-tree-wrapper">//注意:页面上一定要放一个你自己的dom容器,并设置其宽高,里面再放Ttree组件,因为tree组件的高度样式是父容器的高度的100%,内容过多时则出现滚动条。
<Ttree ref="demotree"
:data="treeData"
@onToggle="onToggleHandle"
@onCheck="onCheckHandle"
@onSelect="onSelectHandle"
> </Ttree>
</div>
<template>
<script>
import Ttree from 't-vue-tree';
export default {
components: {
Ttree
},
data(){
return {
}
}
}
</script>
方法示例: