Vue+elementui列表中获取选中复选框得值（没有选中时按钮是禁用）

最新推荐文章于 2024-05-22 17:04:38 发布
最新推荐文章于 2024-05-22 17:04:38 发布
阅读量1.4k 收藏 5
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/buchishutiao/article/details/119737257
版权

先来看效果
在这里插入图片描述
在这里插入图片描述
1.在表格属性中加入@selection-change=“handleSelectionChange”
在这里插入图片描述
2.添加方法，将选中得值赋到数组中，判断有没有选中得值
在这里插入图片描述

在这里插入图片描述

冰冷的冰
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui之@selection-change如何获取复选框所选值集合?| 超级详细，建议收藏
**My Coding Family**
08-08 1万+
element-ui之@selection-change如何获取复选框所选值集合?你若不会我可以教你呀。
从数组中取出element ui checkBox多选框选中的label值
weixin_47517731的博客
06-07 1946
由于特殊需求的原因我需要取出选中的label值（也可以作为简单数组的去重以及数组选取相同内容）
element 复选框判断当前值是选中还是取消选中 并获取到该条数据以及状态
最新发布
m0_65607651的博客
05-22 597
element 复选框判断当前值是选中还是取消选中 并获取到该条数据以及状态
vue element ui 获取,判断复选框选中的值
weixin_51179995的博客
12-23 3461
<el-form-item label="某某字段"> <el-checkbox-group v-model="form.字段名"> <el-checkbox v-for="dict in suspensionChoiceOptions" :key="dict.dictValue" :label="dict.dictValue" style="width:100%;"> {{dict.dictLab.
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇
热门推荐
草巾冒小子的博客
03-02 3万+
element-ui 框架的checkbox组件：点击事件 与 选中判断 - 代码篇
vue elementui项目 el-table勾选复选框获取列表当前行数据 el-table收集列表中被选中复选框数据信息
暂时还没想好博客简介
11-30 1万+
el-table勾选复选框如何获取列表当前行id，如何勾选获取表格当前行的index,name，如何勾选获取表格当前行的数据，VUE获取element组件中table表格的id,element中table单元格获取id，elementUI表格如何获取当前选择的id?【ElementUI】获取表格选中行的id数组element中获取选中行元素的IDel-table收集列表中被选中复选框数据信息
vue复选框默认被选中_vue .js绑定checkbox并获取、改变选中状态的实例
weixin_32549267的博客
01-13 364
如下所示：1.html2.jsvar vum = new Vue({data:{items:[]}methods:{CheckItem:function(item){item.state = !item.state;console.log(this.items);}}})拓展知识：浅谈vue复选框选中的值的问题如下所示：不含3不含4不含5不含7最近遇到vue项目中form表单复选框的问题，拿出来分...
基于 Vue + ElementUI ，专注于中台系统快速搭建的Web前端项目工程框架
05-25
ElementUI则是一款基于Vue.js的UI组件库，提供了丰富的界面元素，如表格、按钮、弹框、提示等，帮助开发者快速构建美观的中后台系统。 本项目“基于 Vue + ElementUI ，专注于中台系统快速搭建的Web前端项目工程...
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip
03-05
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip高分通过项目，已获老师指导。本项目是一套基于SpringBoot的人力资源管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目...
thinkphp6_vue+elementUi后台基础管理框架.zip
11-14
基础路由前后一起存储，用户登录后从后端获取菜单权限，再由前段生产路由。这样前端不用编写路由。缺点是添加菜单需要注意使用公用的index和base。基础的用户管理，角色管理，账号管理，登录，退出，个人信息。 运行...
基于Vue + ElementUI 的web项目工程框架，专注于中台系统快速搭建
05-25
基于Vue + ElementUI 的web项目工程框架，专注于中台系统快速搭建，框架已在多个项目实战检验。 特色：搭配代码生成器，可生成api调用、vuex管理、模拟数据代码； 内置常用超过70个组件、扩展；子模块支持前端微服务...
基于vue + elementUI的管理系统模板
02-22
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，主要用于快速构建中大型企业级后台界面。这两者结合，能够高效地搭建出功能完善、用户体验良好的管理系统的前端部分。 1. **Vue.js 框架...
vue 给checkbox 赋值_Vue动态生成el-checkbox点击无法赋值的解决方法
weixin_30877741的博客
01-17 982
前言最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的例如：定义的 data 的 form 里面是空对象，需要动态生成里面的 keyexport default {data() {return {form: {}}},}从后端接口得到 checkList，这个就是动态生...
vue的checkbox多选框获取其是否选中和获取其自定义属性值
weixin_30433075的博客
06-15 1282
1.第一种情况点击一个全选按钮使下面的所有的checkbox多选框选中或取消选中。如下图： 获取这个多选框的选中还是没有选中的状态 首先给这个全选的input多选框定义一个点击事件，给点击事件传入参数$event,从$event里面获取这个checkbox 选中状态true或false 2.第二种情况是获取循环生成的多个name相同的checkbox的一个多个选中的状态。 ...
vue 可选按钮_【Vue】vue实现列表点击选中（可多选）的思路
weixin_42517573的博客
01-13 2319
如图，需要实现的效果是点击是的左边的选择图标进行切换，列表可以多选，刚接触vue，不知道用vue的解决思路是怎么样的，求大佬指点。回答刚刚做过和你这个差不多的。。。未选择的按钮class为detail-btn，选择后class为detail-btn detail-selectedhtml:css:.detail-btn{width: .43rem;height: .45rem;background...
vue.js如何让某个checkbox禁用_如何轻松了解 Python 必学的 django 框架？
weixin_35509395的博客
01-23 527
django 框架配有一个功能强大的管理站点，里面已经预定义了许多管理站点需要进行的操作，但是有时可能默认的操作不能满足需求，如需要批量更新选中的对象，这需要编写自定义 action 实现。本文基于 django 官方英文文档梳理了一下自定义管理操作需要做的工作，方便快速了解自定义管理操作的实现过程。作者 | 单雨，责编 | 黄浩然出品 | CSDN(ID：CSDNnews)Admin ...
checkbox选中用法以及获取未选中的checkbox
weixin_41517724的博客
06-26 2284
一、checkbox选中用法 问题：如果一个select的改变事件的选中的值改变，那么相应的复选框也要选中或者取消， KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲isfourfive").ch…("#isfourfive option:selected").val(); if(iff==“是”){KaTeX parse...
分别获取checkbox选中和没选中的值
kfgauss的博客
01-31 2123
https://blog.csdn.net/SJK__/article/details/88710282 分别获取checkbox选中和没选中的值 苏建康2019-03-21 11:20:317745收藏1 分类专栏：Jquery 版权 方法一： 定义两个列表分别存储选中和没选中的值 each是遍历的意思 var check_list = [] var nocheck_list = [] # 将获取到选中的value 遍历添加到列表里 $("input[na...
在一个弹窗有一个element ui多选表格，弹窗关闭按钮是禁用状态，当触发了表格多选功能的时候，弹窗关闭按钮变成可用状态
05-30
这个问题涉及到前端开发中的一些知识点，需要一些前置条件才能够理解。 在Element UI中，多选表格是通过el-table组件实现的。如果要实现多选功能，需要在el-table中设置selection属性为true，并且在el-table-column中设置type为selection。这样就可以在表格的左侧添加一个多选框了。 接下来，我们需要实现弹窗关闭按钮的状态变化。这可以通过监听el-table组件的selection-change事件来实现。当用户选择了一些数据后，selection-change事件就会被触发。我们可以在事件处理函数中判断是否有数据被选中，如果有，则将关闭按钮的disabled属性设置为false，否则设置为true。 下面是一个示例代码，可以帮助你更好地理解： ```html <template> <el-dialog :visible.sync="dialogVisible" title="多选表格"> <el-table :data="tableData" :selection="selection" @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <<el-table-column prop="address" label="地址"></el-table-column> </el-table> <div slot="footer"> <el-button :disabled="closeDisabled" @click="handleClose">关闭</el-button> </div> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' } ], selection: [], closeDisabled: true } }, methods: { handleSelectionChange(val) { this.selection = val this.closeDisabled = val.length === 0 }, handleClose() { this.dialogVisible = false } } } </script> ``` 在上面的代码中，我们通过data定义了一些变量，包括dialogVisible（弹窗是否可见）、tableData（表格数据）、selection（已选中的数据）、closeDisabled（关闭按钮是否禁用）等。在el-table组件中，我们设置了selection为true，并且在el-table-column中设置了type为selection，这样就实现了多选功能。在el-button组件中，我们通过:disabled属性绑定了closeDisabled变量，实现了关闭按钮的禁用状态。在handleSelectionChange方法中，我们通过判断val数组的长度来确定是否有数据被选中，并且设置closeDisabled变量的值，从而实现了关闭按钮状态的变化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值