使用vue实现复选框单选多选
界面样式:
<div class="right_con" v-if="isClickApply" style="border:none">
<table class="work-table base-table">
<thead>
<tr>
<th>
<Checkbox v-model="hasAllChecked" @on-change="chooseAll"></Checkbox>
</th>
<th style="text-align:left;width:30%">姓名</th>
<th style="width:30%">手机号码</th>
<th style="width:30%">申请时间</th> <th style="width:10%">操作</th>
</tr>
</thead>
<tbody v-if="applyUserList&&applyUserList.length>0">
<tr v-for="(item,index) in applyUserList" :key="index">
<td>
<Checkbox
v-model="item.hasSelected"
@on-change="chooseSingle(item)"
></Checkbox>
</td>
<td>{{item.trueName}}</td>
<td>{{item.phone}}</td>
<td>{{item.addTime}}</td>
<td style="display:flex;aligin-items:center">
<Button class="agree" @click="agreeClick([item.id])">通过</Button>
<!-- <div class="agree" @click="agreeClick([item.id])">通过</div> -->
<!-- <div class="disagree" @click="disagreeClick([item.id])">驳回</div> -->
<Button class="disagree" @click="disagreeClick([item.id])">驳回</Button>
</td>
</tr>
</tbody> <tbody v-else>
<tr style="text-align: center;">
<td colspan="5">暂无数据</td>
</tr>
</tbody>
</table> <Page
show-total
:total="total"
:page-size="size"
:current="current"
@on-change="changePage"
class="page_switch_class"
v-if="applyUserList&&applyUserList.length>0"
/>
</div>
关键参数:
hasAllChecked(是否全选) 全选方法:
// 全选
chooseAll(val) {
var self = this
if (val) {
self.applyUserList.forEach(ele => {
ele.hasSelected = true
})
} else {
self.applyUserList.forEach(ele => {
ele.hasSelected = false
})
}
},
解释:遍历要显示的数组,手动为每一项增加hasSelected参数,点击全选时,将所有参数中hasSelected置为true,反之亦然。
单选方法:
// 单选
chooseSingle(item) {
var self = this
self.hasAllChecked = true
self.applyUserList.forEach(ele => {
if (!ele.hasSelected) self.hasAllChecked = false
})
},
解释:先将代表全选的hasSelected置为true,遍历要显示的数组,若数组中有已被选中的项,则将hasSelected置为false,代表非全选。
批量通过:
// 批量通过
agreeAll() {
var self = this
var isSelected = false
self.applyUserList.forEach(ele => {
if (ele.hasSelected) isSelected = true
}) if (isSelected) {
var members = []
self.applyUserList.forEach(ele => {
if (ele.hasSelected) members.push(ele.id)
})
self.agreeClick(members)
} else {
self.$app.error('您还没有选择需要审批的成员')
}
},
批量驳回:
// 批量驳回
disagreeAll() {
var self = this
var isSelected = false
self.rejectIds = []
self.applyUserList.forEach(ele => {
if (ele.hasSelected) isSelected = true
}) if (isSelected) {
self.applyUserList.forEach(ele => {
if (ele.hasSelected) self.rejectIds.push(ele.id)
})
self.title =
self.rejectIds.length > 1 ? '批量驳回原因' : '驳回原因'
self.rejectReason = ''
self.modal12 = true
} else {
self.$app.error('您还没有选择需要审批的成员')
}
},
使用vue实现复选框单选多选的更多相关文章
- javascript实现复选框单选多选!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue复选框的全选
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- [CSS]复选框单选框与文字对齐问题的研究与解决.
前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大 ...
- ylbtech-数据库设计与优化-对作为复选框/单选列表的集合表的设计
ylbtech-DatabaseDesgin:ylbtech-数据库设计与优化-对作为复选框/单选列表的集合表的设计 -- DatabaseName:通用表结构-- -- 主要是针对将要设计的表对象, ...
- 关于SWT常用组件(按钮,复选框,单选框(Button类))
Button是SWT中最常用的组件.Button类的继承关系图: Button类的构造方法是newe Button(Composite parent,int style)它有两个参数: 第一个参数:是 ...
- MFC控件编程之复选框单选框分组框
MFC控件编程之复选框单选框分组框 一丶分组框 分组框 英文叫做 GroubBox 添加了分组框主要就是分组.好看.不重点介绍 二丶单选框 英文: Raido Button 单选框需要注意的事项 1. ...
- ztree根据参数动态控制是否显示复选框/单选框(静态JSON数据)
本文不再更新,可能存在内容过时的情况,实时更新请访问原地址:ztree根据参数动态控制是否显示复选框/单选框(静态JSON数据): 现有全省各地区静态JSON数据,现在想通过Url参数,动态控制是否显 ...
- sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突
gridpanel显示checkbox: 添加SelectionModel为Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', he ...
- js实现复选框的全选、全不选、反选
js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...
随机推荐
- Tomcat + mysql + myeclipse 启动遇到的问题
1. 问题: Tomcat启动时报错如下:Table 'performance_schema.session_variables' doesn't exist 2. 网络上普遍找到的解决办法: 控制台 ...
- (一)Python GUI 创建及添加部件
1 开始创建Python GUI 实现代码: import tkinter as tk win = tk.Tk() win.title("Python GUI") win.main ...
- JAVA->查询并显示输入根目录下全部的文件所在目录路径
public static boolean qf(File f,boolean a){ boolean b=false; if(a==true){ File[] fl=f.li ...
- Android记事本在菜单栏添加搜索按钮方法
效果图 这个app结构和我之前将记事本开发的博客基本一致,我这里直接讲一下怎样添加 使用的开发软件为android studio 首先在res目录下新建文件夹menu,添加目录布局文件main_men ...
- 【spring boot】SpringBoot初学(3)– application配置和profile隔离配置
前言 github: https://github.com/vergilyn/SpringBootDemo 说明:我代码的结构是用profile来区分/激活要加载的配置,从而在一个project中写各 ...
- 【database】oracle集合 - Associative Arrays、Varrays、Nested Tables
前言 参考oracle官方文档:PL/SQL Language Reference 11g Release 2 - 5 PL/SQL Collections and Records 可以去看下文档 ...
- JS:JS判断提交表单不能为空等验证
这段代码在<form>中有οnsubmit="return on_submit()",如果 onsubmit ()返回 fasle,表单的元素就不会提交,即action ...
- GitHub概述
1 引言 GitHub是为开发者提供Git仓库的托管服务,是一个让开发者与同事.同学及相同兴趣爱好者共享代码的完美场所. GitHub公司总部位于美国旧金山,拥有一只似章鱼又似猫的吉祥物. GitHu ...
- Python之六:模块
模块包含了大量的函数方法和变量,我们可以用下面的语句调用模块: import 模块名 这样我们就可以在后面的语句中使用模块中的函数或者变量了.调用时只需用 模块名.函数名的方式调用即可 from ...
- jsonp 完成跨域请求注意事项
jsonp 不支持post方式请求跨域数据 可以使用get方式请求 !jsonp 不支持post方式请求跨域数据 可以使用get方式请求 !jsonp 不支持post方式请求跨域数据 可以使用get方 ...