el-checkbox实现全选与单选
实现目的:实现全选与多选,点击确定的时候获取每个值的id传给后台
1、HTML
<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox v-for="(city,i) in cities" :label="city.uuid" :key="i" v-model="city.relation"
@change="handleCheckedCitiesChange">{{city.customerName}}</el-checkbox> <span slot="footer" class="dialog-footer">
<el-button type="primary" :disabled="disabled" @click="classifyConfirm">确定</el-button>
<el-button type="primary" @click="calceConfirn">取消</el-button>
</span>
2、data
data: function () {
return { checkAll: false,
cities: [], //数据源
5 }
6 }
3、js
handleCheckAllChange(val) {
if (this.checkAll) {
this.cities.forEach(item => {
item.relation = true //只改变数据的状态
})
} else {
this.cities.forEach(item => {
item.relation = false
})
}
},
handleCheckedCitiesChange() {
console.log(this.checkedCities);
if (this.checkedCities.length == this.cities.length) {
this.checkAll = true
} else {
this.checkAll = false
}
},
//确认
classifyConfirm() {
var checkedAll = [];
this.cities.forEach(item => {
if(item.relation == true){
checkedAll.push(item.uuid) //确认的时候取状态为true的值,并把要用的字段取出来
}
})
// var checkedAll = [...new Set(this.checkedCities)] //数组去重
var that = this;
var data = {
"customerUuid":that.customerUuid,
"projectCustomerUuid":checkedAll.join(',')
};
console.log(checkedAll)
this.classLoading = true;
$.ajax({
url: Domain + '/xxxxx',
dataType: "json",
method: "POST",
// contentType: "application/json; charset=utf-8",
data:data,
success: function (ret) {
if (ret.retStatus == "1") {
that.$message({
type: 'success',
message: '保存成功!'
});
that.classLoading = false; }
}
})
},
最开始在改变状态的时候就想着取id了,导致后面一系列的问题,后面经过大佬的提醒,在最开始的时候不要取值,只改变状态就行,最后提交的时候遍历数组,然后把每一项里面为true的取出来就可以了,很简单就解决了
或者html 这样写也可以:
<el-checkbox :indeterminate="roleIsIndeterminate" v-model="roleCheckAll" @change="handleRoleAllChange" :disabled="isAllChecked || onlyAllDisabled">全选</el-checkbox>
<el-checkbox-group v-model="checkedRoles" @change="handleCheckedRolesChange">
<el-checkbox v-for="role in roleList" :label="role.id" :key="role.id" :disabled="role.disabled">{{role.name}}</el-checkbox>
</el-checkbox-group>
el-checkbox实现全选与单选的更多相关文章
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- jq pagination分页 全选、单选的思考
$().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...
- checkbox 的全选与全不选
checkbox 的全选与全不选 只需要调用 cekAll.check();方法,这个方法接收两个参数: 参数一: 全选按钮的 id 以字符串的形式写 参数二: 其他 checkbox 的 name ...
- GridView中实现CheckBox的全选
GridView中实现CheckBox的全选 用服务器端的方法: 在页面上放一个gridview控件,配置好数据源,编辑列, <asp:GridView ID="GridView1&q ...
- 通过VBA实现checkbox的全选和反选
checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click() ‘checkbox为总控 ...
- jquery checkbox 选中 全选 插件
checkbox 选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...
- Android高级控件(一)——ListView绑定CheckBox实现全选,增加和删除等功能
Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能 这个控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adap ...
- html checkbox 实现全选/取消全选
html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...
- Android高级控件(一)——ListView绑定CheckBox实现全选,添加和删除等功能
Android高级控件(一)--ListView绑定CheckBox实现全选,添加和删除等功能 这个控件还是挺复杂的.也是项目中应该算是比較经常使用的了,所以写了一个小Demo来讲讲,主要是自己定义a ...
- jquery中checkbox的全选与反选
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...
随机推荐
- NO.1 MSP-ESP432P4111开箱
本人准备2020TI杯模拟电子邀请赛,预计参赛可能会使用TI平台,故从某宝购置一块MSP-ESP432P4111 LaunchPad为参赛做准备.TI官网40美刀,但我只能找国内二道贩子买,有点小贵& ...
- 阿里P9精心编写高并发设计手册,来看大厂是如何进行系统设计
在看这篇文章的应该都是IT圈的朋友吧,不知道你们有没有考虑过这样几件事: 淘宝双11的剁手狂欢为什么天猫没崩掉? 为什么滴滴打车高峰如何滴滴依旧可以平稳运行? 为什么疫情期间,钉钉能支撑那么多人同时上 ...
- [JavaWeb基础] 016.Struts2 国际化配置
如果一个软件想要让其受众是全球或者是几个国家的人,那么这个软件就需要支持多种语言,那么我们就需要软件的国际化去对一些文字信息进行国际化处理.web也一样,当外国人打开我们的网站,要是看到满屏幕的中文, ...
- Vim入门教程——转
简书: https://www.jianshu.com/p/bcbe916f97e1
- Spring boot Sample 0010之spring-boot-web-freemarker
一.环境 1.1.Idea 2020.1 1.2.JDK 1.8 二.目的 spring boot 整合freemarker模板开发web项目 三.步骤 3.1.点击File -> New Pr ...
- 【HBase】HBase架构中各种组件的作用
client: 发起读写请求 维护cache,加快读取速度 zookeeper: HMaster选举,存储meta-region的路由信息,监控集群从节点HRegionSever上信息 HMaster ...
- Java实现 LeetCode 674 最长连续递增序列(暴力)
674. 最长连续递增序列 给定一个未经排序的整数数组,找到最长且连续的的递增序列. 示例 1: 输入: [1,3,5,4,7] 输出: 3 解释: 最长连续递增序列是 [1,3,5], 长度为3. ...
- Java实现 LeetCode 538 把二叉搜索树转换为累加树(遍历树)
538. 把二叉搜索树转换为累加树 给定一个二叉搜索树(Binary Search Tree),把它转换成为累加树(Greater Tree),使得每个节点的值是原来的节点值加上所有大于它的节点值之和 ...
- Java实现 蓝桥杯VIP 算法训练 链表数据求和操作
算法训练 9-7链表数据求和操作 时间限制:1.0s 内存限制:512.0MB 读入10个复数,建立对应链表,然后求所有复数的和. 样例输入 1 2 1 3 4 5 2 3 3 1 2 1 4 2 2 ...
- Java实现蓝桥杯勇者斗恶龙
勇者斗恶龙 你的王国里有一条n个头的恶龙,你希望雇一些骑士把它杀死(即砍掉所有头). 村里有m个骑士可以雇佣,一个能力值为x的骑士可以砍掉恶龙一个直径不超过x的头, 且需要支付x个金币.如何雇佣骑士才 ...