推荐:《uniapp教程》
uniapp内置的checkbox
其实以及checkbox-group
本来挺好的,但是有两个问题:
- 无法依赖其事件实现全选
- 样式固定,难以修改
他们无法实现全选的原因是:
我动态修改checkbox
的checked
字段时,界面上的状态能够实时变化,但是无法触发checkbox-group
的change
事件。意味着无法依赖checkbox-group
管理好已选项。
就是说:我点了全选,界面上看着是全选了。然后此时我取消了其中一个选项,此时触发change事件,但是它反馈给我的已选列表是错的。这是不行的。
所以我自己想了个实现全选多选框的方案。
实现思路
鉴于上面的问题,于是就可以放弃checkbox-group
了,那么,我顺便就放弃了checkbox
,因为我更喜欢radio的圆圈样式。
首先先模拟生成一些数据,方便展示,数据的要点是要有一个字段selected
,其余随心所欲:
<script setup lang="ts"> 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>
然后我们需要有一个存储已选择数据信息的对象,采用map:
// 存储已选内容, 因为这个列表是增删很频繁的,所以选用map而不是数组,key对应的是数据的下标。至于value存放什么,完全由自己定 let selected = reactive(new Map<number, number>());
在然后我们得有一个选项框点击事件,用于选择数据或者取消选择:
// 选项框点击事件,参数是数据的下标 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); } }
再再然后,我们还得有一个全选的点击事件:
// 全选与反选事件 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 v-for="(item, index) in data"> <label style="margin-left: 50px"> <radio :value="String(index)" :checked="item.selected" @click="checkbox(index)" />{{ item.text }} </label> </view> <!-- 全选按钮 --> <label> <radio value="1" :checked="selected.size === data.length" @click="allSelect" />全选</label></template>
其实就两组radio,一个是循环展示数据,一个是全选按钮。
连起来的完整代码:
<template> <!-- 是个多选列表 --> <view v-for="(item, index) in data"> <label style="margin-left: 50px"> <radio :value="String(index)" :checked="item.selected" @click="checkbox(index)" />{{ item.text }} </label> </view> <!-- 全选按钮 --> <label> <radio value="1" :checked="selected.size === data.length" @click="allSelect" />全选</label></template><script setup lang="ts"> 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>
看起来代码不少,其实都是很基础的逻辑判断。
最后效果是这样的:
全选:
多选:
反选全部:
推荐:《uniapp教程》
以上就是实例讲解uniapp实现多选框的全选功能的详细内容,更多请关注php中文网其它相关文章!