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)