Comment utiliser un composant d'interface utilisateur Vue ListView dans votre application Web
Un ListView vous permet de définir un modèle personnalisé pour afficher une liste d'éléments, en utilisant des données distantes ou locales. Apprenez à en utiliser facilement une dans vos applications Web.
Dans mon dernier message nous avons découvert le composant ButtonGroup dans Kendo UI pour Vue . comment utiliser le composant ListView
.
Le ListView
vous permet de définir un modèle personnalisé pour afficher une liste d'éléments. Les éléments de données peuvent provenir d'une source de données locale ou d'une source de données distante telle qu'une API. Il est possible de restituer une liste d'éléments dans Vue à l'aide de l'attribut v-for
. Toutefois, le composant Kendo UI ListView
comporte des fonctionnalités supplémentaires. Lors de l'utilisation de données distantes, des ressources peuvent être créées, récupérées, mises à jour et supprimées sans avoir à écrire de gestionnaires de demandes. Les demandes sont traitées par un composant DataSource
simplement en définissant ses attributs. De plus, la liste peut être paginée à l'aide d'un composant Pager
.
Tout d'abord, nous verrons comment utiliser le ListView
avec des données locales. Nous allons ensuite créer une liste à partir d'une source de données distante, ajouter une pagination et ajouter des fonctionnalités d'édition et de suppression à chaque élément. -simple modèle. Nous installerons ensuite Kendo UI, le thème Material et le paquet ListView
Vue à l’aide des commandes suivantes:
npm install --save @ progress / kendo-ui
npm installez --save @ progress / kendo-theme-material
npm installer --save @ progress / kendo-listview-vue-wrapper
Dans notre fichier main.js
nous allons importer ces packages. Du package listview-vue-wrapper
nous allons importer le Pager
ListView
et ListViewInstaller
. Nos composants seront enregistrés globalement à l'aide de ListViewInstaller
et ajoutés à la liste des composants.
import Vue de 'vue'
import de App
Source link