Comment implémenter des tables modifiables dans Vue
Dans de nombreuses applications web, les tableaux sont un composant essentiel. Les tableaux contiennent généralement de grandes quantités de données. Ils nécessitent donc certaines fonctionnalités spécifiques pour améliorer l'expérience utilisateur. L'une des fonctionnalités importantes est la possibilité de modification. Dans cet article, nous explorerons comment implémenter des tables modifiables à l'aide de Vue.js et fournirons des exemples de code spécifiques.
Étape 1 : Préparer les données
Tout d'abord, nous devons préparer les données pour le tableau. Nous pouvons utiliser un objet JSON pour stocker les données de la table et les stocker dans la propriété data de l'instance Vue. Dans cet exemple, nous allons créer un tableau simple avec trois colonnes : Nom, Quantité et Prix. Voici les exemples de données que nous allons utiliser :
data: {
items: [
{ name: 'Item 1', quantity: 1, price: 10 },
{ name: 'Item 2', quantity: 2, price: 20 },
{ name: 'Item 3', quantity: 3, price: 30 }
]
}Étape 2 : Créer le composant table
Nous utiliserons le composant Vue.js pour créer la table. L'un des avantages de l'utilisation de composants est qu'ils peuvent être réutilisés et utilisés plusieurs fois au sein d'une application Vue. Voici la structure de base du composant table que nous allons créer :
<template>
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>{{ item.name }}</td>
<td>{{ item.quantity }}</td>
<td>{{ item.price }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'TableComponent',
props: {
items: {
type: Array,
required: true
}
}
}
</script> Le composant a un nom appelé "TableComponent" et utilise l'attribut props pour recevoir notre précédente collection de données comme propriétés. La directive v-for est utilisée pour afficher les lignes d'un tableau. Cette directive parcourt chaque objet du tableau items et crée la ligne correspondante. v-for指令用于渲染表格中的行。该指令循环遍历items数组中的每个对象并创建对应的行。
步骤3：启用编辑
现在，我们已经可以在应用程序中显示表格了。下一步是使表格可编辑。为了实现这一点，我们将添加一个“编辑”按钮。用户单击该按钮后，将启用相应单元格的编辑功能。
以下是我们将在表格中添加的编辑按钮的基本代码：
<template>
<!--- 添加按钮 -->
<table>
<!--- 前面的表头和tbody就不再赘述 -->
<tfoot>
<tr>
<td colspan="3">
<button @click="addRow">Add Row</button>
</td>
</tr>
</tfoot>
</table>
</template>
<script>
export default {
name: 'TableComponent',
props: {
items: {
type: Array,
required: true
}
},
methods: {
addRow() {
this.items.push({
name: '',
quantity: 0,
price: 0
})
}
}
}
</script>我们添加了一个按钮，当用户单击该按钮时，将调用addRow方法。该方法将向items数组添加一个新项目对象，初始值为空字符串、0和0。
步骤4：启用单元格编辑
现在，我们已经有了添加新行的功能。下一步是启用单元格编辑功能。一旦用户单击编辑按钮，我们将使相关单元格变为可编辑状态。
我们将使用以下代码来启用单元格编辑功能：
<template>
<table>
<!--- 前面的表头、tbody和tfoot -->
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'name')">{{ item.name }}</td>
<td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'quantity')">{{ item.quantity }}</td>
<td :contenteditable="item.editable" @dblclick="toggleCellEdit(index, 'price')">{{ item.price }}</td>
<td>
<button @click="toggleRowEdit(index)">Edit</button>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'TableComponent',
props: {
items: {
type: Array,
required: true
}
},
methods: {
addRow() {
// 添加新行
},
toggleRowEdit(index) {
let item = this.items[index]
item.editable = !item.editable
},
toggleCellEdit(index, key) {
let item = this.items[index]
if (item.editable) {
return
}
item.editable = true
let el = this.$refs['cell-' + index + '-' + key]
let oldVal = el.innerText
el.innerHTML = '<input type="text" value="' + oldVal + '" @blur="cellEditDone(' + index + ', '' + key + '', $event)">'
el.focus()
},
cellEditDone(index, key, event) {
let item = this.items[index]
item.editable = false
item[key] = event.target.value
}
}
}
</script>我们将添加一个顶级属性“editable”，以跟踪表格行和单元格的编辑状态。在默认情况下，editable设置为false。
使用toggleRowEdit方法，我们可以在单击编辑按钮时切换行的状态。如果行当前是非编订状态，函数将行的editable值设置为true，并在单元格中添加一个文本框，以使编辑状态启动。在此状态下，如果单击其他单元格，我们将使用toggleCellEdit方法来切换单元格的状态。
该方法将原始文本替换为包含文本框的HTML元素，并将其聚焦到文本框中。在输入完成后，将调用单元格编辑完成方法cellEditDone
<template>
<div>
<table-component :items="items" />
</div>
</template>
<script>
import TableComponent from './TableComponent.vue'
export default {
name: 'App',
components: {
TableComponent
},
data: {
items: [
{ name: 'Item 1', quantity: 1, price: 10 },
{ name: 'Item 2', quantity: 2, price: 20 },
{ name: 'Item 3', quantity: 3, price: 30 }
]
}
}
</script>Nous avons ajouté un bouton et lorsque l'utilisateur clique sur le bouton, la méthode addRow sera appelée. Cette méthode ajoutera un nouvel objet item au tableau items, les valeurs initiales étant la chaîne vide, 0 et 0. Étape 4 : Activer l'édition de cellulesMaintenant, nous avons la possibilité d'ajouter de nouvelles lignes. L'étape suivante consiste à activer l'édition de cellules. Une fois que l'utilisateur clique sur le bouton Modifier, nous rendrons la cellule concernée modifiable. 🎜🎜Nous utiliserons le code suivant pour activer l'édition de cellules : 🎜rrreee🎜Nous ajouterons un attribut de niveau supérieur "modifiable" pour suivre l'état d'édition des lignes et des cellules du tableau. Par défaut, editable est défini sur false. 🎜🎜En utilisant la méthode toggleRowEdit, nous pouvons basculer l'état de la ligne lorsque l'on clique sur le bouton d'édition. Si la ligne n'est actuellement pas modifiée, la fonction définit la valeur modifiable de la ligne sur true et ajoute une zone de texte à la cellule pour activer l'état de modification. Dans cet état, si nous cliquons sur une autre cellule, nous utiliserons la méthode toggleCellEdit pour basculer l'état de la cellule. 🎜🎜Cette méthode remplace le texte original par l'élément HTML contenant la zone de texte et le concentre dans la zone de texte. Une fois la saisie terminée, la méthode de complétion de modification de cellule cellEditDone sera appelée pour mettre à jour la valeur dans la collection de données et fermer l'état d'édition. 🎜🎜Étape 5 : Exécuter l'application🎜🎜Nous sommes prêts à exécuter l'application et à tester le formulaire modifiable. Voici un contexte Vue.js de base utilisé pour restituer et tester notre composant table modifiable : 🎜rrreee🎜 Nous le transmettons au composant table lors de son initialisation à l'aide de la propriété item. Cela permettra à l'instance du composant d'accéder à notre objet de données et de le restituer dans le tableau. La fonctionnalité permettant d'ajouter de nouvelles lignes et de modifier les lignes existantes fonctionne très bien. 🎜🎜Résumé🎜🎜Dans cet article, nous avons appris à créer un tableau modifiable à l'aide de Vue.js. Nous avons appris comment utiliser les composants Vue pour organiser les tableaux, comment activer la possibilité de modification et comment traiter les entrées et les enregistrer dans notre collection de données. Nous avons fourni des exemples de code complets pour votre commodité d'utilisation et de test. En utilisant les techniques explorées dans cet article, vous pouvez créer rapidement et facilement des formulaires entièrement fonctionnels et hautement personnalisables pour améliorer l'expérience utilisateur de votre application Web. 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undress AI Tool
Images de déshabillage gratuites
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Utilisez ddrescue pour récupérer des données sous Linux
Mar 20, 2024 pm 01:37 PM
DDREASE est un outil permettant de récupérer des données à partir de périphériques de fichiers ou de blocs tels que des disques durs, des SSD, des disques RAM, des CD, des DVD et des périphériques de stockage USB. Il copie les données d'un périphérique bloc à un autre, laissant derrière lui les blocs corrompus et ne déplaçant que les bons blocs. ddreasue est un puissant outil de récupération entièrement automatisé car il ne nécessite aucune interruption pendant les opérations de récupération. De plus, grâce au fichier map ddasue, il peut être arrêté et repris à tout moment. Les autres fonctionnalités clés de DDREASE sont les suivantes : Il n'écrase pas les données récupérées mais comble les lacunes en cas de récupération itérative. Cependant, il peut être tronqué si l'outil est invité à le faire explicitement. Récupérer les données de plusieurs fichiers ou blocs en un seul
Comment lier un sous-compte sur Xiaohongshu ? Comment vérifie-t-il si le compte est normal ?
Mar 21, 2024 pm 10:11 PM
À l’ère actuelle d’explosion de l’information, la construction d’une marque personnelle et d’une image d’entreprise est devenue de plus en plus importante. En tant que principale plateforme de partage de vie dans le domaine de la mode en Chine, Xiaohongshu a attiré l'attention et la participation d'un grand nombre d'utilisateurs. Pour les utilisateurs qui souhaitent étendre leur influence et améliorer l’efficacité de la diffusion du contenu, les sous-comptes contraignants sont devenus un moyen efficace. Alors, comment Xiaohongshu lie-t-il un sous-compte ? Comment vérifier si le compte est normal ? Cet article répondra à ces questions pour vous en détail. 1. Comment lier un sous-compte sur Xiaohongshu ? 1. Connectez-vous à votre compte principal : Tout d'abord, vous devez vous connecter à votre compte principal Xiaohongshu. 2. Ouvrez le menu des paramètres : cliquez sur « Moi » dans le coin supérieur droit, puis sélectionnez « Paramètres ». 3. Accédez à la gestion du compte : dans le menu des paramètres, recherchez l'option "Gestion du compte" ou "Assistant de compte" et cliquez sur
Open source! Au-delà de ZoeDepth ! DepthFM : estimation rapide et précise de la profondeur monoculaire !
Apr 03, 2024 pm 12:04 PM
0. À quoi sert cet article ? Nous proposons DepthFM : un modèle d'estimation de profondeur monoculaire génératif de pointe, polyvalent et rapide. En plus des tâches traditionnelles d'estimation de la profondeur, DepthFM démontre également des capacités de pointe dans les tâches en aval telles que l'inpainting en profondeur. DepthFM est efficace et peut synthétiser des cartes de profondeur en quelques étapes d'inférence. Lisons ce travail ensemble ~ 1. Titre des informations sur l'article : DepthFM : FastMonocularDepthEstimationwithFlowMatching Auteur : MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr
Vitesse Internet lente des données cellulaires sur iPhone : correctifs
May 03, 2024 pm 09:01 PM
Vous êtes confronté à un décalage et à une connexion de données mobile lente sur iPhone ? En règle générale, la puissance de l'Internet cellulaire sur votre téléphone dépend de plusieurs facteurs tels que la région, le type de réseau cellulaire, le type d'itinérance, etc. Vous pouvez prendre certaines mesures pour obtenir une connexion Internet cellulaire plus rapide et plus fiable. Correctif 1 – Forcer le redémarrage de l'iPhone Parfois, le redémarrage forcé de votre appareil réinitialise simplement beaucoup de choses, y compris la connexion cellulaire. Étape 1 – Appuyez simplement une fois sur la touche d’augmentation du volume et relâchez-la. Ensuite, appuyez sur la touche de réduction du volume et relâchez-la à nouveau. Étape 2 – La partie suivante du processus consiste à maintenir le bouton sur le côté droit. Laissez l'iPhone finir de redémarrer. Activez les données cellulaires et vérifiez la vitesse du réseau. Vérifiez à nouveau Correctif 2 – Changer le mode de données Bien que la 5G offre de meilleures vitesses de réseau, elle fonctionne mieux lorsque le signal est plus faible
Tutoriel BTCC : Comment lier et utiliser le portefeuille MetaMask sur l'échange BTCC ?
Apr 26, 2024 am 09:40 AM
MetaMask (également appelé Little Fox Wallet en chinois) est un logiciel de portefeuille de cryptage gratuit et bien accueilli. Actuellement, BTCC prend en charge la liaison au portefeuille MetaMask. Après la liaison, vous pouvez utiliser le portefeuille MetaMask pour vous connecter rapidement, stocker de la valeur, acheter des pièces, etc., et vous pouvez également obtenir un bonus d'essai de 20 USDT pour la première liaison. Dans le didacticiel du portefeuille BTCCMetaMask, nous présenterons en détail comment enregistrer et utiliser MetaMask, ainsi que comment lier et utiliser le portefeuille Little Fox dans BTCC. Qu'est-ce que le portefeuille MetaMask ? Avec plus de 30 millions d’utilisateurs, MetaMask Little Fox Wallet est aujourd’hui l’un des portefeuilles de crypto-monnaie les plus populaires. Son utilisation est gratuite et peut être installée sur le réseau en tant qu'extension
Google est ravi : les performances de JAX surpassent Pytorch et TensorFlow ! Cela pourrait devenir le choix le plus rapide pour la formation à l'inférence GPU
Apr 01, 2024 pm 07:46 PM
Les performances de JAX, promu par Google, ont dépassé celles de Pytorch et TensorFlow lors de récents tests de référence, se classant au premier rang sur 7 indicateurs. Et le test n’a pas été fait sur le TPU présentant les meilleures performances JAX. Bien que parmi les développeurs, Pytorch soit toujours plus populaire que Tensorflow. Mais à l’avenir, des modèles plus volumineux seront peut-être formés et exécutés sur la base de la plate-forme JAX. Modèles Récemment, l'équipe Keras a comparé trois backends (TensorFlow, JAX, PyTorch) avec l'implémentation native de PyTorch et Keras2 avec TensorFlow. Premièrement, ils sélectionnent un ensemble de
Les robots Tesla travaillent dans les usines, Musk : Le degré de liberté des mains atteindra 22 cette année !
May 06, 2024 pm 04:13 PM
La dernière vidéo du robot Optimus de Tesla est sortie, et il peut déjà fonctionner en usine. À vitesse normale, il trie les batteries (les batteries 4680 de Tesla) comme ceci : Le responsable a également publié à quoi cela ressemble à une vitesse 20 fois supérieure - sur un petit "poste de travail", en sélectionnant et en sélectionnant et en sélectionnant : Cette fois, il est publié L'un des points forts de la vidéo est qu'Optimus réalise ce travail en usine, de manière totalement autonome, sans intervention humaine tout au long du processus. Et du point de vue d'Optimus, il peut également récupérer et placer la batterie tordue, en se concentrant sur la correction automatique des erreurs : concernant la main d'Optimus, le scientifique de NVIDIA Jim Fan a donné une évaluation élevée : la main d'Optimus est l'un des robots à cinq doigts du monde. le plus adroit. Ses mains ne sont pas seulement tactiles
Comment lier l'application Cainiao à Pinduoduo ? Comment ajouter le Cainiao Wrap à la plateforme Pinduoduo ?
Mar 19, 2024 pm 02:30 PM
L'application Cainiao est une plate-forme qui peut vous fournir diverses informations logistiques. Les fonctions ici sont très puissantes et faciles à utiliser. Si vous rencontrez des problèmes liés à la logistique, ils peuvent être résolus ici. Quoi qu'il en soit, cela peut vous apporter une solution. -Le service d'arrêt peut tout résoudre à temps. La vérification de la livraison express, la récupération de la livraison express, l'envoi de la livraison express, etc. se font sans aucun problème. Nous avons coopéré avec diverses plateformes et toutes les informations peuvent être interrogées. Il arrivera que les marchandises achetées sur Pinduoduo ne puissent pas afficher les informations logistiques. En fait, vous devez lier manuellement Pinduoduo pour y parvenir. Les méthodes spécifiques ont été triées ci-dessous, et tout le monde peut y jeter un œil. Comment lier Cainiao au compte Pinduoduo : 1. Ouvrez l'application Cainiao et accédez à la page principale.
