Vue Tree

简体中文

English

简体中文

English

基本用法 ​

数据展示 ​

可直接传入 data Prop。当数据量较大时，为了防止 Vue 监听过多数据导致性能问题，可使用 setData 方法设置数据。

查看代码
vue
<template>
  <VTree :data="data" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VTree from '@wsfe/vue-tree'

const data = ref([
  {
    title: 'node-1',
    id: 'node-1',
    children: [
      {
        title: 'node-1-1',
        id: 'node-1-1',
        children: [
          {
            title: 'node-1-1-1',
            id: 'node-1-1-1',
          },
          {
            title: 'node-1-1-2',
            id: 'node-1-1-2',
          },
          {
            title: 'node-1-1-3',
            id: 'node-1-1-3',
          },
        ],
      },
      {
        title: 'node-1-2',
        id: 'node-1-2',
        children: [
          {
            title: 'node-1-2-1',
            id: 'node-1-2-1',
          },
          {
            title: 'node-1-2-2',
            id: 'node-1-2-2',
          },
        ],
      },
      {
        title: 'node-1-3',
        id: 'node-1-3',
        children: [
          {
            title: 'node-1-3-1',
            id: 'node-1-3-1',
          },
          {
            title: 'node-1-3-2',
            id: 'node-1-3-2',
          },
        ],
      },
    ],
  },
  {
    title: 'node-2',
    id: 'node-2',
    children: [
      {
        title: 'node-2-1',
        id: 'node-2-1',
        children: [
          {
            title: 'node-2-1-1',
            id: 'node-2-1-1',
          },
          {
            title: 'node-2-1-2',
            id: 'node-2-1-2',
          },
        ],
      },
    ],
  },
])
</script>

单选 ​

使用 selectable 启用单选功能

查看代码
vue
<template>
  <VTree v-model="selected" :data="data" selectable />
  <div>Selected Node: {{ selected }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VTree from '@wsfe/vue-tree'

const selected = ref(null)

const data = ref([
  {
    title: 'node-1',
    id: 'node-1',
    children: [
      {
        title: 'node-1-1',
        id: 'node-1-1',
        children: [
          {
            title: 'node-1-1-1',
            id: 'node-1-1-1',
          },
          {
            title: 'node-1-1-2',
            id: 'node-1-1-2',
          },
          {
            title: 'node-1-1-3',
            id: 'node-1-1-3',
          },
        ],
      },
      {
        title: 'node-1-2',
        id: 'node-1-2',
        children: [
          {
            title: 'node-1-2-1',
            id: 'node-1-2-1',
          },
          {
            title: 'node-1-2-2',
            id: 'node-1-2-2',
          },
        ],
      },
      {
        title: 'node-1-3',
        id: 'node-1-3',
        children: [
          {
            title: 'node-1-3-1',
            id: 'node-1-3-1',
          },
          {
            title: 'node-1-3-2',
            id: 'node-1-3-2',
          },
        ],
      },
    ],
  },
  {
    title: 'node-2',
    id: 'node-2',
    children: [
      {
        title: 'node-2-1',
        id: 'node-2-1',
        children: [
          {
            title: 'node-2-1-1',
            id: 'node-2-1-1',
          },
          {
            title: 'node-2-1-2',
            id: 'node-2-1-2',
          },
        ],
      },
    ],
  },
])
</script>

多选 ​

使用 checkable 启用单选功能

查看代码
vue
<template>
  <VTree v-model="checked" :data="data" checkable />
  <div>Checked Nodes: {{ checked }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VTree from '@wsfe/vue-tree'

const checked = ref(null)

const data = ref([
  {
    title: 'node-1',
    id: 'node-1',
    children: [
      {
        title: 'node-1-1',
        id: 'node-1-1',
        children: [
          {
            title: 'node-1-1-1',
            id: 'node-1-1-1',
          },
          {
            title: 'node-1-1-2',
            id: 'node-1-1-2',
          },
          {
            title: 'node-1-1-3',
            id: 'node-1-1-3',
          },
        ],
      },
      {
        title: 'node-1-2',
        id: 'node-1-2',
        children: [
          {
            title: 'node-1-2-1',
            id: 'node-1-2-1',
          },
          {
            title: 'node-1-2-2',
            id: 'node-1-2-2',
          },
        ],
      },
      {
        title: 'node-1-3',
        id: 'node-1-3',
        children: [
          {
            title: 'node-1-3-1',
            id: 'node-1-3-1',
          },
          {
            title: 'node-1-3-2',
            id: 'node-1-3-2',
          },
        ],
      },
    ],
  },
  {
    title: 'node-2',
    id: 'node-2',
    children: [
      {
        title: 'node-2-1',
        id: 'node-2-1',
        children: [
          {
            title: 'node-2-1-1',
            id: 'node-2-1-1',
          },
          {
            title: 'node-2-1-2',
            id: 'node-2-1-2',
          },
        ],
      },
    ],
  },
])
</script>

多选忽略特定节点 ​

配置 ignoreMode 可在 v-model 和 getCheckedNodes 方法忽略父节点或者子节点，该 Prop 仅初始设置有效

查看代码
vue
<template>
  <div>
    <span>ignoreMode: </span>

    <input type="radio" id="ignore-mode-none" value="none" v-model="ignoreMode" />
    <label for="ignore-mode-none">none</label>

    <input type="radio" id="ignore-mode-parents" value="parents" v-model="ignoreMode" />
    <label for="ignore-mode-parents">parents</label>

    <input type="radio" id="ignore-mode-children" value="children" v-model="ignoreMode" />
    <label for="ignore-mode-children">children</label>
  </div>
  <VTree v-if="flag" v-model="checked" :data="data" checkable :ignoreMode="ignoreMode" />
  <div>Checked Nodes: {{ checked }}</div>
</template>

<script setup lang="ts">
import { nextTick, ref, watchEffect } from 'vue'
import VTree from '@wsfe/vue-tree'

const ignoreMode = ref('none')
const checked = ref(null)
const flag = ref(true)

watchEffect(() => {
  if (ignoreMode.value) {
    flag.value = false
    checked.value = null
    nextTick(() => flag.value = true)
  }
})

const data = ref([
  {
    title: 'node-1',
    id: 'node-1',
    children: [
      {
        title: 'node-1-1',
        id: 'node-1-1',
        children: [
          {
            title: 'node-1-1-1',
            id: 'node-1-1-1',
          },
          {
            title: 'node-1-1-2',
            id: 'node-1-1-2',
          },
          {
            title: 'node-1-1-3',
            id: 'node-1-1-3',
          },
        ],
      },
      {
        title: 'node-1-2',
        id: 'node-1-2',
        children: [
          {
            title: 'node-1-2-1',
            id: 'node-1-2-1',
          },
          {
            title: 'node-1-2-2',
            id: 'node-1-2-2',
          },
        ],
      },
      {
        title: 'node-1-3',
        id: 'node-1-3',
        children: [
          {
            title: 'node-1-3-1',
            id: 'node-1-3-1',
          },
          {
            title: 'node-1-3-2',
            id: 'node-1-3-2',
          },
        ],
      },
    ],
  },
  {
    title: 'node-2',
    id: 'node-2',
    children: [
      {
        title: 'node-2-1',
        id: 'node-2-1',
        children: [
          {
            title: 'node-2-1-1',
            id: 'node-2-1-1',
          },
          {
            title: 'node-2-1-2',
            id: 'node-2-1-2',
          },
        ],
      },
    ],
  },
])
</script>

父子节点级联 ​

配置 cascade 可指定父子节点是否级联

查看代码
vue
<template>
  <div>
    <span>cascade: </span>

    <input type="radio" id="cascade-true" :value="true" v-model="cascade" />
    <label for="cascade-true">true</label>

    <input type="radio" id="cascade-false" :value="false" v-model="cascade" />
    <label for="cascade-false">false</label>
  </div>
  <VTree v-if="flag" v-model="checked" :data="data" checkable :cascade="cascade" />
  <div>Checked Nodes: {{ checked }}</div>
</template>

<script setup lang="ts">
import { nextTick, ref, watchEffect } from 'vue'
import VTree from '@wsfe/vue-tree'

const cascade = ref(true)
const checked = ref(null)
const flag = ref(true)

watchEffect(() => {
  cascade.value
  flag.value = false
  checked.value = null
  nextTick(() => flag.value = true)
})

const data = ref([
  {
    title: 'node-1',
    id: 'node-1',
    children: [
      {
        title: 'node-1-1',
        id: 'node-1-1',
        children: [
          {
            title: 'node-1-1-1',
            id: 'node-1-1-1',
          },
          {
            title: 'node-1-1-2',
            id: 'node-1-1-2',
          },
          {
            title: 'node-1-1-3',
            id: 'node-1-1-3',
          },
        ],
      },
      {
        title: 'node-1-2',
        id: 'node-1-2',
        children: [
          {
            title: 'node-1-2-1',
            id: 'node-1-2-1',
          },
          {
            title: 'node-1-2-2',
            id: 'node-1-2-2',
          },
        ],
      },
      {
        title: 'node-1-3',
        id: 'node-1-3',
        children: [
          {
            title: 'node-1-3-1',
            id: 'node-1-3-1',
          },
          {
            title: 'node-1-3-2',
            id: 'node-1-3-2',
          },
        ],
      },
    ],
  },
  {
    title: 'node-2',
    id: 'node-2',
    children: [
      {
        title: 'node-2-1',
        id: 'node-2-1',
        children: [
          {
            title: 'node-2-1-1',
            id: 'node-2-1-1',
          },
          {
            title: 'node-2-1-2',
            id: 'node-2-1-2',
          },
        ],
      },
    ],
  },
])
</script>

单选与多选并存 ​

当既可以单选又可以多选时， v-model 绑定的是多选的值

查看代码
vue
<template>
  <VTree v-model="checked" :data="data" selectable checkable />
  <div>v-model: {{ checked }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VTree from '@wsfe/vue-tree'

const checked = ref(null)

const data = ref([
  {
    title: 'node-1',
    id: 'node-1',
    children: [
      {
        title: 'node-1-1',
        id: 'node-1-1',
        children: [
          {
            title: 'node-1-1-1',
            id: 'node-1-1-1',
          },
          {
            title: 'node-1-1-2',
            id: 'node-1-1-2',
          },
          {
            title: 'node-1-1-3',
            id: 'node-1-1-3',
          },
        ],
      },
      {
        title: 'node-1-2',
        id: 'node-1-2',
        children: [
          {
            title: 'node-1-2-1',
            id: 'node-1-2-1',
          },
          {
            title: 'node-1-2-2',
            id: 'node-1-2-2',
          },
        ],
      },
      {
        title: 'node-1-3',
        id: 'node-1-3',
        children: [
          {
            title: 'node-1-3-1',
            id: 'node-1-3-1',
          },
          {
            title: 'node-1-3-2',
            id: 'node-1-3-2',
          },
        ],
      },
    ],
  },
  {
    title: 'node-2',
    id: 'node-2',
    children: [
      {
        title: 'node-2-1',
        id: 'node-2-1',
        children: [
          {
            title: 'node-2-1-1',
            id: 'node-2-1-1',
          },
          {
            title: 'node-2-1-2',
            id: 'node-2-1-2',
          },
        ],
      },
    ],
  },
])
</script>

展开动画 ​

配置 animation 可开启展开收起动画

查看代码
vue
<template>
  <VTree :data="data" animation />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VTree from '@wsfe/vue-tree'

const data = ref([
  {
    title: 'node-1',
    id: 'node-1',
    children: [
      {
        title: 'node-1-1',
        id: 'node-1-1',
        children: [
          {
            title: 'node-1-1-1',
            id: 'node-1-1-1',
          },
          {
            title: 'node-1-1-2',
            id: 'node-1-1-2',
          },
          {
            title: 'node-1-1-3',
            id: 'node-1-1-3',
          },
        ],
      },
      {
        title: 'node-1-2',
        id: 'node-1-2',
        children: [
          {
            title: 'node-1-2-1',
            id: 'node-1-2-1',
          },
          {
            title: 'node-1-2-2',
            id: 'node-1-2-2',
          },
        ],
      },
      {
        title: 'node-1-3',
        id: 'node-1-3',
        children: [
          {
            title: 'node-1-3-1',
            id: 'node-1-3-1',
          },
          {
            title: 'node-1-3-2',
            id: 'node-1-3-2',
          },
        ],
      },
    ],
  },
  {
    title: 'node-2',
    id: 'node-2',
    children: [
      {
        title: 'node-2-1',
        id: 'node-2-1',
        children: [
          {
            title: 'node-2-1-1',
            id: 'node-2-1-1',
          },
          {
            title: 'node-2-1-2',
            id: 'node-2-1-2',
          },
        ],
      },
    ],
  },
])
</script>

连接线 ​

配置 showLine 可开启连接线

showLine 除了 boolean，还可以接收一个对象用于具体配置连接线的类型、宽度、颜色与是否启用折线

查看代码
vue
<template>
  <div>
    <div>
      <span>showLine.type: </span>

      <input type="radio" id="showline-type-solid" value="solid" v-model="type" />
      <label for="showline-type-solid">solid</label>

      <input type="radio" id="showline-type-dashed" value="dashed" v-model="type" />
      <label for="showline-type-dashed">dashed</label>
    </div>

    <div>
      <span>showLine.polyline: </span>

      <input type="radio" id="showline-polyline-true" :value="true" v-model="polyline" />
      <label for="showline-polyline-true">true</label>

      <input type="radio" id="showline-polyline-false" :value="false" v-model="polyline" />
      <label for="showline-polyline-false">false</label>
    </div>

    <div v-if="type === 'dashed'">
      <span>showLine.dashDensity: </span>
      <input type="range" :min="1" :max="10" :step="1" v-model.number="dashDensity" />
      <span>{{ dashDensity }}</span>
    </div>
  </div>
  <VTree :data="data" :showLine="showLine" animation defaultExpandAll />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import VTree from '@wsfe/vue-tree'

const type = ref('solid')
const polyline = ref(false)
const dashDensity = ref(3)

const showLine = computed(() => {
  return {
    type: type.value,
    polyline: polyline.value,
    dashDensity: dashDensity.value,
  }
})

const data = ref([
  {
    title: 'node-1',
    id: 'node-1',
    children: [
      {
        title: 'node-1-1',
        id: 'node-1-1',
        children: [
          {
            title: 'node-1-1-1',
            id: 'node-1-1-1',
          },
          {
            title: 'node-1-1-2',
            id: 'node-1-1-2',
          },
          {
            title: 'node-1-1-3',
            id: 'node-1-1-3',
          },
        ],
      },
      {
        title: 'node-1-2',
        id: 'node-1-2',
        children: [
          {
            title: 'node-1-2-1',
            id: 'node-1-2-1',
          },
          {
            title: 'node-1-2-2',
            id: 'node-1-2-2',
          },
        ],
      },
      {
        title: 'node-1-3',
        id: 'node-1-3',
        children: [
          {
            title: 'node-1-3-1',
            id: 'node-1-3-1',
          },
          {
            title: 'node-1-3-2',
            id: 'node-1-3-2',
          },
        ],
      },
    ],
  },
  {
    title: 'node-2',
    id: 'node-2',
    children: [
      {
        title: 'node-2-1',
        id: 'node-2-1',
        children: [
          {
            title: 'node-2-1-1',
            id: 'node-2-1-1',
          },
          {
            title: 'node-2-1-2',
            id: 'node-2-1-2',
          },
        ],
      },
    ],
  },
])
</script>

远程 ​

设置 load 方法可以使用远程加载数据，如果有设置 data，则 data 数据作为根数据； 如果没有传 data，则初始化时调用 load 方法载入根数据，其中节点参数为 null

查看代码
vue
<template>
  <div>
    <button @click="remoteShow = true">Load root data</button>
  </div>
  <div :style="{ height: '150px', position: 'relative' }">
    <VTree v-if="remoteShow" :load="remoteLoad" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VTree from '@wsfe/vue-tree'

const remoteShow = ref(false)

const remoteLoad = (node, resolve) => {
  const length = node ? 2 : 5
  setTimeout(() => {
    resolve(Array.from({ length }).map((_, index) => {
      return {
        title: index.toString(),
        id: Math.random().toString(),
      }
    }))
  }, 1000)
}
</script>