elcheckbox实现全选与单选

实现目的：实现全选与多选，点击确定的时候获取每个值的id传给后台

1、HTML

1 全选
2 3 @change="handleCheckedCitiesChange">{{city.customerName}}
5
6
7 确定
8 取消
9

2、data

1 data: function () {
2 return { 3 checkAll: false,
4 cities: [], //数据源
5　　　}
6　}
　　　　　　

3、js

1 handleCheckAllChange(val) {
2 if (this.checkAll) {
3 this.cities.forEach(item => {
4 item.relation = true //只改变数据的状态
5 })
6 } else {
7 this.cities.forEach(item => {
8 item.relation = false
9 })
10 }
11 },
12 handleCheckedCitiesChange() {
13 console.log(this.checkedCities);
14 if (this.checkedCities.length == this.cities.length) {
15 this.checkAll = true
16 } else {
17 this.checkAll = false
18 }
19 },

1 //确认
2 classifyConfirm() {
3 var checkedAll = [];
4 this.cities.forEach(item => {
5 if(item.relation == true){
6 checkedAll.push(item.uuid) //确认的时候取状态为true的值，并把要用的字段取出来
7 }
8 })
9 // var checkedAll = [...new Set(this.checkedCities)] //数组去重
10 var that = this;
11 var data = {
12 "customerUuid":that.customerUuid,
13 "projectCustomerUuid":checkedAll.join(',')
14 };
15 console.log(checkedAll)
16 this.classLoading = true;
17 $.ajax({
18 url: Domain + '/xxxxx',
19 dataType: "json",
20 method: "POST",
21 // contentType: "application/json; charset=utf-8",
22 data:data,
23 success: function (ret) {
24 if (ret.retStatus == "1") {
25 that.$message({
26 type: 'success',
27 message: '保存成功!'
28 });
29 that.classLoading = false;32 }
33 }
34 })
35 },

最开始在改变状态的时候就想着取id了，导致后面一系列的问题，后面经过大佬的提醒，在最开始的时候不要取值，只改变状态就行，最后提交的时候遍历数组,然后把每一项里面为true的取出来就可以了，很简单就解决了

或者html 这样写也可以：

全选

{{role.name}}