Basic Usage

Data Display

data prop can be accepted. To prevent from performance issue, use setData when the data is large.

Open example in Playground

Show code

<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>

Single Select

Use selectable to enable single select

Open example in Playground

Show code

<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>

Multiple Select

Use checkable to enable multiple select

Open example in Playground

Show code

<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>

Ignore Specific Nodes

Parent nodes or child nodes can be ignored in v-model and getCheckedNodes using ignoreMode prop. This prop is effective only when it's set initially.

Open example in Playground

Show code

<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>

Node Cascade

Use cascade to config if parent and child nodes are cascaded

Open example in Playground

Show code

<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>

Single and Multiple Select

When single and multiple select are enabled at the same time, the value of v-model is bound to multiple select value

Open example in Playground

Show code

<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>

Expand Animation

Use animation to enable animation when expand/collapse

Open example in Playground

Show code

<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>

Connecting Line

Use showLine to show lines between nodes

Apart from boolean, the showLine prop also takes an object to config the type, width, color and polyline of the line

Open example in Playground

Show code

<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>

Remote

Config load method to load data from remote. data prop will be used as root data if present; If there's no data, then load will be invoked to load root data with a null node parameter

Open example in Playground

Show code

<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>