vue实现多选、单选、全选和反选

最新推荐文章于 2024-05-11 17:09:17 发布
最新推荐文章于 2024-05-11 17:09:17 发布
阅读量3.2k 收藏 8
点赞数 2
分类专栏： 个人整理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42281216/article/details/84632652
版权

单选：利用v-for数组循环中的的index，即数组下标

想法：首先定义一个标志数n，每次点击时传入index，令标志数n=index。此时，若index = n，则可以实现其他功能。

 

 多选、全选、反选

想法：这次需要在data里定义一个工具数组arr，点击事件radio，把这个index传进arr。然后之后判断arr中是否存在这个index，如果存在，则说明他是被选中的。

 

路明凡
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE实现全选和单选
Love_yl的专栏
07-12 4242
效果图： 单选 全部选中 HTML代码： <div class="hello"> <div> 　　<input type="checkbox" id="allCheck" @click="checkAll" v-model="checkIsAll"> 　　<label for="allCheck">全选</label> </div> <ul> 　　&l
vue单选全选
bugBuilder
07-31 393
单选全选 一般的后台管理系统都要用到单选全选,再进行一些批量的操作,下面分享一下我开发的一点小经验(我是小菜鸡,不喜可喷),话不多说,代码搞起来,俺使用了element-ui中的 **el-checkbox** 标签,网址如下 https://element.eleme.cn/#/zh-CN/component/checkbox,使用其中的框状态改变的事件,代码如下 <template> <div> <P><el-checkbox v-mo
vue中 单选、多选、全选小功能
Yijing_Wei的博客
05-10 1245
前端 vue 小功能 单选 多选 全选 uniapp 功能
Vue3-购物车列表-单选和全选功能实现
最新发布
weixin_57334661的博客
05-11 448
/ 通过skuId找到要修改的那一项 然后把它的selected 修改为传过来的selected。1. 操作单选决定全选：只有当cartList中的所有项都为true时，全选状态才为true。2. 操作全选决定单选：cartList中的所有项的selected都要跟着一起变。// 把cartList 中每一项的selected都设置为当前的全选状态。// store 中 cartList 数组无法知道要修改谁的选中状态。// 除了 selected 补充一个用来筛选的参数 - skuId。
vue项目elementui 的 el-checkbox复选框改成单选框样式：实现全选、全否、单选、反选功能（最简单的方法）
南北极之间
11-17 7282
我的需求是：只有2个选项。又想使用复选框的样式，自己又不想去改样式。 于是可以用js去控制选中的值，如果选中值的长度大于1，则每次只截取第二个数。因为选中值是从后面追加进去的。第二个数就是最新选中值。 效果： 代码： <el-form-item label="角色" :label-width="formLabelWidth"> <el-checkbox-group v-model="someList.role"> &
vue实现全选、全不选和部分选择功能
热门推荐
Charles_Tian的博客
07-24 1万+
在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具有价值。 我这里演示后台返回的数据格式如下： ​ { data:{ list:[ {id:240201,code:'nqctedp80pc8',desc:'推广',typ...
el-select 下拉框多选实现全选的实现
12-12
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些 方法一：下拉项增加一个【全选】，然后应该有以下几种情况： 下拉选项全都勾选时，【全选...
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
checkbox全选、反选、单选（前端）
01-26
在本文中，我们将深入探讨如何实现"全选、反选、单选"的功能，特别是在存在一级类别和二级类别的场景下。 首先，我们要理解`checkbox`的基本用法。`checkbox`在HTML中通过`<input type="checkbox">`标签创建，它有...
购物车中多选单选Demo
05-26
"购物车中多选单选Demo"是一个针对这一功能的示例实现，旨在提供一个简单易懂的解决方案，帮助开发者快速构建购物车的多选与单选功能。在这个Demo中，我们可以探讨以下几个关键知识点： 1. **多选与单选**：在...
全选，单选，多种状态变化
05-21
在"ȫѡDEMO"这个示例中，可能包含了一个演示如何实现这些功能的代码或应用实例，它可能包含了HTML、CSS和JavaScript代码，展示了如何创建用户友好的全选、单选及多选交互。 为了实现这些功能，开发者通常会使用...
vue实现全选、反选功能
08-30
主要为大家详细介绍了vue实现全选、反选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue开发实现单选多选功能
qq_38143787的博客
10-10 1096
vue开发复选框实现单选、多选、反选功能 1.全选： <input type="checkbox" v-model="checkAll" @click="handleCheckAll" />序号 2.单选： <input type="checkbox" v-model="checkList" v-bind:value="item.AllocationNo" />{{ ...
vue--简单实现全选和单选
qq_45219069的博客
08-25 2891
<body> <div id="box"> <table> <thead> <tr> <th><input type="checkbox" style="margin-left:35px" @click="allChoose($event)"> 全选</th> &...
vue实现列表的复选框，单选，多选
JKC_HOWL的博客
10-22 6369
不适用组件库的方式，实现列表的单选，多选。 一，在获取到列表数据赋值给parkList后，动态的添加checked属性为false // 将列表parkList进行遍历动态添加checked为false this.parkList.map(item => { this.$set(item, 'checked', false) }) 二，将复选框绑定checked属性，属性值为动态添加checked。 <-- 通过v-for生成的，每一行前面的复选框，item为v-for的每一项
列表 单选框（vue3）
hfyldx的博客
07-22 1279
element 列表 单选框
Vue+Element 实现表格单选
weixin_45732391的博客
10-20 1493
Vue+Element 实现表格单选 实现效果： 表格可以单选，且有按钮 Element网站的试了没有实现，可能代码还有问题，且每行前面没有选择按钮。 1. 修改代码： <el-table-column slot="before" label="选择" width="60px" align="center" header-align="center"> <template slot-scope="scope"> <el-
vue CheckBox全选和反选
bossxu_的博客
05-23 4256
通过一段时间vue学习。自己模拟练习了CheckBox的全选的反选 希望对大家有用## &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=devi
Vue全选，多选，单选，反选
qq_44707181的博客
12-02 537
1.全选 cheakAll: false 改变全选状态，为true时全部打勾（遍历单选） getAll(){ this.shopList.forEach(（item ，index）=> { item.check = this.cheackAll //check为单选状态 }) } 2.多选，单选 ① var n = 当前shopList中的check值为ture的个数 ② if(选中的长度 == 全选的长度)，全选为true,否则为false changAll(){ 第一种方式 //选中状态 fi
用vue写一个全选和反选
06-06
好的，以下是使用 Vue 实现全选和反选的示例代码： ``` <template> <div> <input type="checkbox" v-model="selectAll" @change="selectAllFn"> 全选 <br> <label v-for="item in itemList" :key="item.id"> <input type="checkbox" v-model="item.checked" @change="selectOneFn"> {{ item.name }} </label> </div> </template> <script> export default { data() { return { itemList: [ { id: 1, name: '选项1', checked: false }, { id: 2, name: '选项2', checked: false }, { id: 3, name: '选项3', checked: false }, { id: 4, name: '选项4', checked: false } ], selectAll: false } }, methods: { selectAllFn() { this.itemList.forEach(item => { item.checked = this.selectAll }) }, selectOneFn() { const checkedNum = this.itemList.filter(item => item.checked).length this.selectAll = checkedNum === this.itemList.length } } } </script> ``` 在上面的代码中，我们在 `data` 中定义了一个 `itemList` 数组，其中包含了多个选项，每个选项都有一个 `checked` 属性表示是否被选中。还定义了一个 `selectAll` 变量表示是否全选。 在模板中，我们首先渲染了一个“全选”复选框，当它被选中时，会调用 `selectAllFn` 方法将 `itemList` 数组中的所有选项的 `checked` 属性都设置为 `true`。然后使用 `v-for` 渲染了多个选项，每个选项都有一个复选框，当它被选中时，会调用 `selectOneFn` 方法。在 `selectOneFn` 方法中，我们使用 `filter` 方法过滤出已经被选中的选项，然后判断它们的数量是否等于 `itemList` 数组的长度，如果是，则表示所有选项都被选中，此时将 `selectAll` 设为 `true`，否则设为 `false`。 这样就完成了全选和反选的实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值