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