Fermer

mai 3, 2019

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