vue antd checkbox 遍历多选 全选 反全选功能

Vue+antd-UI checkbox实现遍历全选、单选、反全选功能。话不多少，直接上代码

首先是效果图

vue html代码

<div class="address-content">
   <div class="address-item address-item-all">
     <a-checkbox @change="onChangeAll" v-model="changeAll"
       >全国</a-checkbox
     >
   </div>
   <div class="address-group">
     <div
       class="address-item"
       v-for="(item, index) in cityList"
       :key="index"
     >
       <a-checkbox
         :indeterminate="item.indeterminate"
         :checked="item.checkAll"
         @change="onCheckAllChange($event, index)"
       >
         {{ item.label }}
       </a-checkbox>
       <a-checkbox-group
         v-model="item.checkedList"
         :options="item.childAreaList"
         @change="onChange($event, index)"
       >
         <span
           class="checkbox-label"
           slot="label"
           slot-scope="{ value }"
         >
           {{ value }}
         </span>
       </a-checkbox-group>
     </div>
   </div>
 </div>
</div>

js代码

<script>
export default {
	data(){
		return{
		changeAll: false,
		cityList: [
			{
			"areaCode": 110000,
			"areaDesc": "北京",
			"childAreaList": [
			{
				"areaCode": 110100,
				"areaDesc": "北京市",
				"childAreaList": null
			}
		]
		},
			 {
				"areaCode": 120000,
				"areaDesc": "天津",
				"childAreaList": [{
					"areaCode": 120100,
					"areaDesc": "天津市",
					"childAreaList": null
				}]
			}, {
				"areaCode": 130000,
				"areaDesc": "河北",
				"childAreaList": [{
					"areaCode": 130100,
					"areaDesc": "石家庄",
					"childAreaList": null
				}, {
					"areaCode": 130200,
					"areaDesc": "唐山",
					"childAreaList": null
				}, {
					"areaCode": 130300,
					"areaDesc": "秦皇岛",
					"childAreaList": null
				}, {
					"areaCode": 130400,
					"areaDesc": "邯郸",
					"childAreaList": null
				}, {
					"areaCode": 130500,
					"areaDesc": "邢台",
					"childAreaList": null
				}, {
					"areaCode": 130600,
					"areaDesc": "保定",
					"childAreaList": null
				}, {
					"areaCode": 130700,
					"areaDesc": "张家口",
					"childAreaList": null
				}, {
					"areaCode": 130800,
					"areaDesc": "承德",
					"childAreaList": null
				}, {
					"areaCode": 130900,
					"areaDesc": "沧州",
					"childAreaList": null
				}, {
					"areaCode": 131000,
					"areaDesc": "廊坊",
					"childAreaList": null
				}, {
					"areaCode": 131100,
					"areaDesc": "衡水",
					"childAreaList": null
				}]
			}
			]
		} 
	}
},
mounted(){
	// 因为数据是接口请求的，这里模拟一下，顺便对数据处理成自己需要的格式
	this.init()
},
methods:{
	init(){
        this.cityList.map((item) => {
          item.checkedList = [];
          item.checkAll = false;
          item.indeterminate = false;
          item.label = item.areaDesc;
          item.value = item.areaCode;
          item.children = item.childAreaList;
          item.childAreaList &&
            item.childAreaList.map((ite) => {
              ite.label = ite.areaDesc;
              ite.value = ite.areaCode;
            });
        });
	},
    // 选择全国
    onChangeAll(e) {
      console.log(e.target.checked);
      this.cityList.map((item) => {
        item.checkAll = e.target.checked;
        item.childAreaList.map((ite) => {
          if (e.target.checked) {
            item.checkedList.push(ite.areaCode);
          } else {
            item.checkedList = [];
          }
        });
      });
    },
    // 单选的时候，需要对比数据的长度来判断是否全部选中
     returnCheckStatus() {
      let list = [];
      let checkedList = [];
      this.cityList.map((item) => {
        checkedList = [...checkedList, ...item.checkedList];
        item.children.map((ite) => {
          list.push(ite.value);
        });
      });
      list = [...new Set(list)];
      checkedList = [...new Set(checkedList)];
      console.log(list.length === checkedList.length);
      return list.length === checkedList.length;
    },
    //单个选择
    onChange(e, index) {
      if (e.length < 1) { // 只要是未选中的时候，直接为false;
        this.changeAll = false; 
      } else {// 选中的时候，需要对比选中的长度跟全部的城市的id对比
        this.changeAll = this.returnCheckStatus();
      }
      this.cityList[index].indeterminate =
        !!this.cityList[index].checkedList.length &&
        this.cityList[index].checkedList.length <
          this.cityList[index].childAreaList.length;
      this.cityList[index].checkAll =
        this.cityList[index].checkedList.length ===
        this.cityList[index].childAreaList.length;
    },
    //选择全部的事件
    onCheckAllChange(e, index) {
      console.log(e.target.checked);
      if (!e.target.checked) { // 全选的时候只要有一个未选，就改变全部选择的状态
        this.changeAll = false;
      } else {
        let count = 1;// 判断全选的时候，二级的有哪些值是改变的，然后+1，最后对比
        this.cityList.map((item) => {
          if (item.checkAll) {
            count += 1;
          }
        });
        this.changeAll = count === this.cityList.length;
      }

      // 二级全选的时候，需要拿出当前childAreaList数组里边id
      let newArr = [];
      if (e.target.checked) {
        newArr = this.cityList[index].childAreaList.map((item) => {
          return item.value;
        });
      }
      this.cityList[index].checkedList = e.target.checked ? newArr : [];
      this.cityList[index].indeterminate = false;
      this.cityList[index].checkAll = e.target.checked;
    },
}
<script>

css代码

.address-content {
  height: 566px;
  border: 1px solid #e2e8fe;
  background: #fff;
  border-radius: 10px;
  .address-group {
    height: 518px;
    overflow-y: auto;
  }
}
::v-deep .address-item {
  display: flex;
  padding-top: 20px;
  padding-left: 20px;
  border-bottom: 1px solid #e2e8fe;
  &.address-item-all {
    padding: 16px 0 16px 20px;
    background: #f9fafd;
  }
  &:nth-child(2n) {
    background: #f7f9ff;
  }
  > .ant-checkbox-wrapper {
    margin-right: 48px;
    flex-shrink: 0;
  }
  .ant-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    .ant-checkbox-wrapper {
      width: 112px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      > span:nth-child(2) {
        display: inline-block;
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

有问题的话请指出，看到会修改 0_0

结束
转载请加来源