Cet article vous apporte des connaissances pertinentes sur uniapp, qui organise principalement les problèmes liés à la mise en œuvre de la fonction tout sélectionner de la boîte à sélection multiple. La raison pour laquelle la fonction tout sélectionner ne peut pas être implémentée est que lorsque le champ est coché. la case à cocher est modifiée dynamiquement, l'interface Le statut peut changer en temps réel, mais l'événement de changement de checkbox-group ne peut pas être déclenché. Jetons-y un coup d'œil, j'espère que cela sera utile à tout le monde.
Recommandé : "tutoriel uniapp"
Les checkbox
et checkbox-group
intégrés d'uniapp sont en fait assez bons, mais il y a deux problèmes : checkbox
其实以及checkbox-group
本来挺好的,但是有两个问题:
他们无法实现全选的原因是:
我动态修改checkbox
的checked
字段时,界面上的状态能够实时变化,但是无法触发checkbox-group
的change
事件。意味着无法依赖checkbox-group
管理好已选项。
就是说:我点了全选,界面上看着是全选了。然后此时我取消了其中一个选项,此时触发change事件,但是它反馈给我的已选列表是错的。这是不行的。
所以我自己想了个实现全选多选框的方案。
鉴于上面的问题,于是就可以放弃checkbox-group
了,那么,我顺便就放弃了checkbox
,因为我更喜欢radio的圆圈样式。
首先先模拟生成一些数据,方便展示,数据的要点是要有一个字段selected
Je modifie dynamiquement En cochant le champ <code>checked
de la case à cocher, l'état sur l'interface peut changer en temps réel, mais l'événement change
de checkbox-group
ne peut pas être déclenché. Cela signifie que checkbox-group
ne peut pas être utilisé pour gérer les options sélectionnées.
C'est-à-dire : j'ai cliqué sur Sélectionner tout, et il semblait que Tout était sélectionné sur l'interface. Ensuite, j'ai annulé l'une des options et l'événement de changement a été déclenché, mais la liste sélectionnée qu'elle m'a renvoyée était fausse. Cela ne fonctionnera pas.
J'ai donc trouvé une solution pour implémenter la boîte de sélection multiple Sélectionner tout.
Au vu des problèmes ci-dessus, je peux abandonner checkbox-group
Ensuite, j'ai abandonné checkbox
en passant, parce que je préfère le style cercle de la radio.
Tout d'abord, simulez et générez des données pour un affichage facile. Le point clé des données est d'avoir un champ sélectionné
, et le reste peut être fait comme vous le souhaitez :
<script> import { reactive } from "vue"; // 模拟的数据对象,要是响应式的 let data = reactive([] as { id: number; text: string; selected: boolean }[]); // 生成数据 for (let i = 0; i < 10; i++) { data.push({ id: i + 5, text: "标题" + i, selected: false, }); }</script>
Ensuite, nous avons besoin d'un objet pour stocker les informations de données sélectionnées, en utilisant map :
// 存储已选内容, 因为这个列表是增删很频繁的,所以选用map而不是数组,key对应的是数据的下标。至于value存放什么,完全由自己定 let selected = reactive(new Map<number>());</number>
Ensuite, nous devons avoir un événement de clic de boîte d'option pour sélectionner ou désélectionner des données :
// 选项框点击事件,参数是数据的下标 function checkbox(index: number) { // 选中的状态下再次点击,即为取消选中 if (data[index].selected) { data[index].selected = false; selected.delete(index); // 然后删除对应key即可 } // 未选中状态下点击 else { data[index].selected = true; selected.set(index, data[index].id); } }
Et puis, nous devons avoir un événement de clic pour toutes les sélections :
// 全选与反选事件 function allSelect() { // 已经全选情况下,就是反选,全选就说明长度一样 if (selected.size === data.length) { selected.clear(); // 全部清除 data.forEach((element) => { element.selected = false; // 全部不选,就行了 }); } // 还未全选的状态下 else { data.forEach((element, index) => { // 因为可能存在部分已经选择了,所以得先判断是否已存在,不存在才需要添加 if (!selected.has(index)) { selected.set(index, element.id); // key是对应的下标index,而value是可以自定义的 element.selected = true; // 设为选中 } }); } }
<template> <!-- 是个多选列表 --> <view> <label> <radio></radio>{{ item.text }} </label> </view> <!-- 全选按钮 --> <label> <radio></radio>全选</label></template>
Le code complet connecté ensemble :
<template> <!-- 是个多选列表 --> <view> <label> <radio></radio>{{ item.text }} </label> </view> <!-- 全选按钮 --> <label> <radio></radio>全选</label></template><script> import { reactive } from "vue"; // 模拟的数据对象,要是响应式的 let data = reactive([] as { id: number; text: string; selected: boolean }[]); // 生成数据 for (let i = 0; i < 10; i++) { data.push({ id: i + 5, text: "标题" + i, selected: false, }); } // 存储已选内容, 因为这个列表是增删很频繁的,所以选用map而不是数组,key对应的是数据的下标。至于value存放什么,完全由自己定 let selected = reactive(new Map<number, number>()); // 全选与反选事件 function allSelect() { // 已经全选情况下,就是反选,全选就说明长度一样 if (selected.size === data.length) { selected.clear(); // 全部清除 data.forEach((element) => { element.selected = false; // 全部不选,就行了 }); } // 还未全选的状态下 else { data.forEach((element, index) => { // 因为可能存在部分已经选择了,所以得先判断是否已存在,不存在才需要添加 if (!selected.has(index)) { selected.set(index, element.id); // key是对应的下标index,而value是可以自定义的 element.selected = true; // 设为选中 } }); } } // 选项框点击事件,参数是数据的下标 function checkbox(index: number) { // 选中的状态下再次点击,即为取消选中 if (data[index].selected) { data[index].selected = false; selected.delete(index); // 然后删除对应key即可 } // 未选中状态下点击 else { data[index].selected = true; selected.set(index, data[index].id); } }</script><style></style>
L'effet final est le suivant : Tout sélectionner :
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!