组件库文档 tmui.design
树 Tree
用来展示层级,文件夹结构体等.
🌶️ 树 Tree 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text :font-size="30" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
<tm-divider></tm-divider>
<tm-tree ref="tree" @node-click="test" :data="dlist"></tm-tree>
</tm-sheet>
</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmTree from '@/tmui/components/tm-tree/tm-tree.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
const tree = ref<InstanceType<typeof tmTree>|null>(null)
const dlist = ref(loop())
function loop(path = '0', level = 2) {
const list = []
for (let i = 0; i < 5; i += 1) {
const key = `${path}-${i}`
const treeNode = {
text: '选项' + key,
id: key,
disabled: i == 1
}
if (level > 0) {
treeNode.children = loop(key, level - 1)
}
list.push(treeNode)
}
return list
}
function test(e: any) {
console.log(e)
}
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
followTheme | [Boolean,String] | true | 是否跟随主题 |
color | String | 'primary' | 颜色 |
expandedIconOpen | String | 'tmicon-sort-down' | 父节点打开时的图标 |
expandedIconClose | String | 'tmicon-caret-right' | 父节点被关闭时显示的图标 |
checkable | Boolean | true | 允许在节点前添加复选框 |
multiple | Boolean | true | 是否允许多选 |
expandedId | Array | ()=>[] | 展开的父节点 |
defaultExpandedId | Array | ()=>[] | 默认展开的父节点 |
selectedId | Array | ()=>[] | 选中的节点。 |
defaultSelectedId | Array | ()=>[] | 默认选中的节点 |
data | Array | ()=>[],required:true | 结构见下方,生成树结构的数据。结构必须要有id字段。当然可以通过field-names来映射,如果你的唯一标识字段不是Id的话。 |
fieldNames | Object | ()=>{return{id:'id',text:'text'}} | 数据结构字段的映射表 |
showLine | [Boolean,String] | true | 显示连线 |
tree,data数据结构:
ts
export interface baseNodeData {
icon?:string,//节点图标。
color?:string,//节点颜色主题
disabled?:boolean,//节点是否禁用
text:string,//节点标题
id:number|string,//节点标识
checked?:boolean,
expanded?:boolean //是否父节点打开。
}
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
node-click | - | - | 节点标题点击时触发的事件 |
check | e: baseNodeData | - | 节点复选框状态变化时触发的事件 |
expand | - | - | 父节点展开/关闭时触发的事件 |
update:selectedId | - | - | 可以使用v-model:selected-id双向绑定数据 |
update:expandedId | - | - | 可以使用v-model:expanded-id双向绑定数据 |
🌽 slot插槽
无
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
checkAll | checked:boolean | 改变所有节点状态,true时选中所有节点,false时取消所有节点 | |
checkNode | key 节点id,checked 节点状态 | 注意,如果指定的是父节点,将会选中他的所有节节点,反之取消它所有的子节点 | |
expandAll | checked 指定节点打开还是状态的状态。 | 展开或者关闭所有父节点状态 | |
expandNode | key 节点id,checked 节点状态 | true | 指定父节点展开状态 |
getCheckedNodes | strategy = 'all' | Ref<(string | number)[]> | 获取选中的节点key数组,all:返回所有选中的节点,parent:父子节点都选中时只返回父节点,children:只返回子节点 |
getExpandedNodes | Ref<(string | number)[]> | 获取当前展开的节点 | |
getNodePath | key 节点id | 反回节点路径 | 从父节点开始一直到本节点的路径数组。 |
showNode | key 需要要打开所在路径显示的节点 | 显示某一节点 | 将会打开它所在的所有父节点 |
💏 文档贡献
此页文档由夏天贡献,如果对该框架感兴趣的可以参与我们一同进步!