Tree Select

This component can be used to select one or multiple items in a list or group.

This component depends on third-party component library for Vue 3:

• Component (dropdown) from PrimeVue
• CSS from PrimeIcons and PrimeFlex

Example Usage

Example

Themen auswählen

Themen auswählen

Ausgewählte Themen:

<template>
  <div>
    <SkTreeSelect
      v-model="selectedSubjects"
      :options="topics"
      class="mr-s mb-l"
      placeholder="Themen auswählen"
      selection-mode="checkbox"
    />

    <SkTreeSelect
      v-model="selectedSubjects"
      :options="topics"
      class="mr-s mb-l"
      placeholder="Themen auswählen"
      selection-mode="multiple"
    />
  </div>
  <div>Ausgewählte Themen: {{ selectedSubjects }}</div>
</template>

<script setup>
import { ref } from 'vue';
import SkTreeSelect from '../../../src/components/SkTreeSelect.vue';

const selectedSubjects = ref(null);

const topics = ref([
  {
    label: 'Mathematik ist ein tolles Fach Mathematik',
    key: 'Mathe',
    children: [
      { label: 'Analysis', key: 'AN' },
      { label: 'Algebra', key: 'AL' },
      { label: 'Geometrie', key: 'GE' },
    ],
  },
  {
    label: 'Deutsch',
    key: 'DE',
    children: [
      { label: 'Gedichte', key: 'GE' },
      { label: 'Romane', key: 'RO' },
      { label: 'Kurzgeschichten', key: 'KU' },
    ],
  },
  {
    label: 'Biologie',
    key: 'BIO',
    children: [
      { label: 'Tiere', key: 'TI' },
      { label: 'Pflanzen', key: 'PL' },
      { label: 'Mikroorganismen', key: 'MI' },
    ],
  },
  { label: 'Chemie', key: 'CH' },
  { label: 'Deutsch2', key: 'DE2' },
  { label: 'Biologie2', key: 'BIO2' },
  { label: 'Chemie2', key: 'CH2' },
]);
</script>

Reference

This component can be extended with all options from PrimeVue

Properties

Name	Type	Default	Description
v-model	Array	[]	The final choosen options
detailed	Boolean	false	Show the selected elements inside the input or not

Events

Name	Parameters	Description
click	$event	do something
update:modelValue	$event	triggered whenever the input changes