实现目的:实现全选与多选,点击确定的时候获取每个值的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>

最新文章

  1. Kooboo CMS技术文档之一:Kooboo CMS技术背景
  2. oracle索引监控
  3. opencv嫁接vlfeat densesift
  4. JQ分页功能
  5. C#获取IP地址
  6. Redis学习记录之————微博项目
  7. window.location.href 放置在单独的JS文件中使用时问题
  8. openerp经典收藏 深入理解报表运行机制(转载)
  9. Python 第六篇(中):面向对象编程中级篇
  10. Chapter 2 Open Book——38
  11. Centos中hive/hbase/hadoop/mysql实际操作及问题总结
  12. WPF 10天修炼 第七天- WPF资源、样式、控件模板
  13. Django_URL
  14. Kong(v1.0.2)代理参考
  15. Spring 静态代理+JDK动态代理和CGLIB动态代理
  16. 【汤鸿鑫 3D太极】5年目标规划(基本功、套路、实战搏击)
  17. springmvc的异步处理
  18. 面向对象程序设计_Task7_Summary
  19. JAVA反射的使用之ResultSet的自动转换
  20. springmvc后台生成验证码

热门文章

  1. Consul+upsync+Nginx实现动态负载均衡
  2. 0511Object类和异常
  3. [JavaWeb基础] 018.Struts2 Action通配符使用
  4. eclipse与idea部署项目的区别
  5. DDD之2领域概念
  6. Java并发编程 (九) 线程调度-线程池
  7. Java实现 蓝桥杯 算法训练 Airport Configuration
  8. Java实现UVA10131越大越聪明(蓝桥杯每周一题)
  9. 用户和用户组管理-影子文件shadow
  10. PAT 跟奥巴马一起编程