单选多选场景的解决方案集合

warnerwu 发布于2019-08-26 13:32 / 3041人阅读

摘要：当变选中状态变更时对所有的备选进行遍历主要作用是把所有的项目重置成未选中。该方案主要就是进行元素的查询及更改。多选场景解决方法基本思想是使用数组保存已经选中的项，然后多该数组进行栈操作。

单选多选场景的解决方案集合

场景

经常遇到一些类似菜单和导航这样的页面效果需求，基本情况是：

有很多的带选项，其效果是选中和未选中

有的是多选，有的是单选

解决

1.单选场景

因为是单选场景所以需要切换

解决方法一

设定每个备选状态为选中和未选中。

当变选中状态变更时对所有的备选进行遍历主要作用是：

把所有的项目重置成未选中。

把选中的那个项目设置成选中状态。

解决方法二

该方法主要是结合了视觉和数据两方面的考虑，利用比较的方式动态的设置class来呈现效果。

设置一个值currentSelected。

该值可以有两个状态，一是无值，二是选中的某个值。
该值应该是一个标志值，也可以是个实际值。

当在选中项目之间切换时，只是更改currentSelected的值即可。

每次在选中的项目之间切换时遍历整个项目，然后如果状态的设置为选中，不符合的设置为未选中。

如果currentSelected已经存在，那么不进行任何操作。

解决方案三

该解决方案不用遍历，基本思想是，把已经存储的相更改状态，把选中的线在更改状态。
该方案主要就是进行el元素的查询及更改。

2.多选场景

解决方法

基本思想是使用数组保存已经选中的项，然后多该数组进行栈操作。

私有云海外云主机买云服务器选多大带宽好阿里云服务器系统盘选多大合适单选框单选

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108999.html

vue实现单选多选反选全选全不选

摘要：多选如果已经选中了，那就取消选中，如果没有，则选中接下来我们写一下全选，全取消，反选的实现。单选当我们用v-for渲染一组数据的时候，我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 {{item}} 首选定义一个selectedNum,当我们点击item时，便把这个selectedNum更改为我们所点击的item的index，然后每个item上加入判...

刘福 2019-08-23 11:50 评论0 收藏0
【收藏】这么多WEB组件(CSS)，攒一个网站够了吧？

摘要：因时间不足，能力有限等原因，存在文字阐述不准及代码测试不足等诸多问题。因此只限于学习范围，不适用于实际应用。另外各个组件之件没有联系，包括字体及配色甚至布局都是相互独立的。 1 表单(form)相关 1.1 输入框(input) 一个简单的输入框样式，简捷又不夸张。需要约30行的CSS代码。 showImg(http://res.42du.cn/up/201803/mxi6rzu3.j...

不知名网友 2019-08-30 14:19 评论0 收藏0
1248转ABCD

摘要：另外，题目的选项是数组的索引，所以不需要用到这个方法，这个只是选择题的答案，根据索引来显示对应的可以用这个同样也是根据码来转换的额，应当对传入的值进行限制，但是我懒，哈哈。由于项目是教育类的，所以会遇到选择题，单选多选不定项之类的，而从后台传过来的答案是1,2,4,8之类的数字，用来对应ABCD,采用数值相加来解决多选问题，比如后台传来的值是8，就是对应选项D，而穿过15，就对应1+...

FrozenMap 2019-08-22 16:08 评论0 收藏0