TxList · Vue · tecexpress

Liste mit Suche, Auswahl und optionalem Löschen oder Umordnen über Ereignisse.

Prop	Typ	Standard	Bedeutung
`items`	`TxEntry[] \| undefined`	`[]`	Einträge; bei Datenbindung durch dataSource ersetzt.
`dataSource`	`TxSource<TxEntry> \| undefined`	`undefined`	Liste, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
`disabled`	`boolean \| undefined`	`false`	Sperrt die Interaktion.
`label`	`string \| undefined`	`undefined`	Beschriftung beziehungsweise zugänglicher Name.
`modelValue`	`unknown[] \| undefined`	`[]`	Kontrollierter Wert für v-model.
`selectionMode`	`string \| undefined`	`none`	Auswahlmodus.
`searchEnabled`	`boolean \| undefined`	`false`	Aktiviert die Suche.
`grouped`	`boolean \| undefined`	`false`	Zeigt die geladenen Einträge nach Gruppen.
`allowDeleting`	`boolean \| undefined`	`false`	Zeigt Aktionen zum Löschen von Listeneinträgen.
`allowReordering`	`boolean \| undefined`	`false`	Zeigt Aktionen zum Umordnen von Listeneinträgen.
`virtual`	`boolean \| undefined`	`false`	Rendert nur den sichtbaren Listenbereich.
`itemHeight`	`number \| undefined`	`44`	Feste Zeilenhöhe für virtuelle Listen.
`height`	`number \| undefined`	`300`	Höhe; Vue-Zahlen in Pixeln, Flutter in logischen Pixeln.

Ereignisse

Event	Payload / Verhalten
update:modelValue	Neuer Wert von modelValue; über v-model:modelValue übernehmen (modelValue: v-model).
itemClick	{ itemData, itemIndex }
itemDeleted	Gelöschter Listeneintrag in { itemData }.
itemReordered	Umordnung in { itemData, fromIndex, toIndex, items }; items enthält die neue Liste.

Slots

Slot	Argumente
item	{ item, index, selected }

vue

<script setup lang="ts">
import { TxList } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'

</script>

<template>
  <TxList :items="[{ id: 1, text: 'One' }]" search-enabled />
</template>

TxList.