@webitel/ui

Appearance

WtTree ​

Specs ​

Example Tree ​

Selected element: Subservice 4

TestDescription 1

Catalog 1

TestDescription 2

Catalog 2

Service 1

Subservice 4

Catalog 3

Service 2

TestDescription 3

Subservice 1

Service 3

Subservice 2

Service 4

TestDescription 4

Subservice 3

Code
vue
<template>
  <p>Selected element: {{ selectedElement }}</p>
  <wt-tree
    v-model="selectedElement"
    :data="data"
    item-label="name"
    item-data="name"
    children-prop="services"
    allow-parent
  >
    <template #item-prefix="{ data }">
      {{ data.description }}
    </template>
  </wt-tree>
</template>

<script setup>
import { WtTree } from '@webitel/ui-sdk/components';
import { ref } from 'vue';

const selectedElement = ref('Subservice 4');
const data = ref([
  {
    id: '1',
    name: 'Catalog 1',
    description: 'TestDescription 1',
    services: [],
  },
  {
    id: '2',
    name: 'Catalog 2',
    description: 'TestDescription 2',
    services: [
      {
        id: '3',
        name: 'Service 1',
        services: [
          {
            id: '11',
            name: 'Subservice 4',
            searched: true,
            services: [],
          },
        ],
      },
    ],
  },
  {
    id: '4',
    name: 'Catalog 3',
    services: [
      {
        id: '5',
        name: 'Service 2',
        services: [
          {
            id: '6',
            name: 'Subservice 1',
            description: 'TestDescription 3',
            searched: true,
            services: [],
          },
        ],
      },
      {
        id: '7',
        name: 'Service 3',
        services: [
          {
            id: '8',
            name: 'Subservice 2',
            searched: true,
            services: [],
          },
        ],
      },
      {
        id: '9',
        name: 'Service 4',
        services: [
          {
            id: '10',
            name: 'Subservice 3',
            description: 'TestDescription 4',
            searched: true,
            services: [],
          },
        ],
      },
    ],
  },
]);
</script>

Example Multiple Tree ​

Selected element: [ "Subservice 4" ]

Catalog 1

Catalog 2

Service 1

Subservice 4

Catalog 3

Service 2

Subservice 1

Service 3

Subservice 2

Service 4

Subservice 3

Code
vue
<template>
  <p>Selected element: {{ selectedElement }}</p>
  <wt-tree
    v-model="selectedElement"
    :data="data"
    item-label="name"
    item-data="name"
    multiple
    children-prop="services"
    allow-parent
  />
</template>

<script setup>
import { WtTree } from '@webitel/ui-sdk/components';
import { ref } from 'vue';

const selectedElement = ref(['Subservice 4']);
const data = ref([
  {
    id: '1',
    name: 'Catalog 1',
    services: [],
  },
  {
    id: '2',
    name: 'Catalog 2',
    services: [
      {
        id: '3',
        name: 'Service 1',
        services: [
          {
            id: '11',
            name: 'Subservice 4',
            searched: true,
            services: [],
          },
        ],
      },
    ],
  },
  {
    id: '4',
    name: 'Catalog 3',
    services: [
      {
        id: '5',
        name: 'Service 2',
        services: [
          {
            id: '6',
            name: 'Subservice 1',
            services: [],
          },
        ],
      },
      {
        id: '7',
        name: 'Service 3',
        services: [
          {
            id: '8',
            name: 'Subservice 2',
            services: [],
          },
        ],
      },
      {
        id: '9',
        name: 'Service 4',
        services: [
          {
            id: '10',
            name: 'Subservice 3',
            services: [],
          },
        ],
      },
    ],
  },
]);
</script>