0.2.2 • Published 1 year ago
vue2-virtual-tree v0.2.2
vue2-virtual-tree
npm 安装
npm install vue2-virtual-tree
yarn 安装
yarn add vue2-virtual-tree
使用
import VirtualTree from 'vue2-virtual-tree'
import 'vue2-virtual-tree/lib/vue2-virtual-tree.css'
Vue.use(VirtualTree)
<virtual-tree
:data="data"
:props="props"
@node-click="handleNodeClick"
@checked="handleChecked"
ref="tree"
>
</virtual-tree>
<script>
export default {
data() {
return {
props: {
children: 'TestChildren',
label: 'Label',
key: 'uuid',
},
}
},
}
</script>
因为虚拟树需要通过滚动视口确定区域, 所以初始化时virtual-tree
所占的 DOM 必须有高度, 这个高度可以是由父级设置的.
可以为每行数据定义插槽
<virtual-tree
:data="data"
:props="props"
@node-click="handleNodeClick"
@checked="handleChecked"
>
<template #default="{ text, parentName }">
<div class="test-slot">{{ text }} {{ parentName }}</div>
</template>
</virtual-tree>
默认插槽中会注入当前节点的数据, parentName
是自动生成的一个关联父级字段, 类似面包屑这样的字符串
全部 > 节点1 > 字节2
点击对应节点的时候,会把添加一个active
的 className, 你可以自己设置样式来定义点击时的效果
.treeitem_content_label.active {
}
API
handleChecked(obj, bool)
勾选某条数据, 会自动进行关联勾选
- obj 行数据
- bool true: 勾选 false: 取消勾选
// eg:
this.$refs.tree.handleChecked(row, true)
handleExpanded(obj, bool)
展开或关闭某条节点. 会自动进行关联展开或关闭
- obj 行数据
- bool true: 展开 false: 关闭
// eg:
this.$refs.tree.handleExpanded(row, true)