<template> <div> <el-checkbox v-model="checkAll" @change="handleCheckAllChange" :indeterminate="isIndeterminate" >全选</el-checkbox > <el-checkbox v-model="checkInvert" @change="handleInvertCheckChange" >反选</el-checkbox > <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" > <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox> </el-checkbox-group> </div> </template> <script> const cityOptions = ["上海", "北京", "广州", "深圳"]; export default { data() { return { checkAll: false, checkInvert: false, checkedCities: ["上海", "北京"], cities: cityOptions, isIndeterminate: true, }; }, methods: { // 全选 handleCheckAllChange(val) { this.checkedCities = val ? cityOptions : []; this.isIndeterminate = false; this.checkInvert = false; }, // 反选 handleInvertCheckChange(val) { let cities = this.cities; let checkedCities = this.checkedCities; if (checkedCities.length === 0) { checkedCities = val ? cities : []; } else if (checkedCities.length === cities.length) { this.checkedCities = []; this.checkAll = false; } else { let list = cities.concat(checkedCities).filter((v, i, array) => { return array.indexOf(v) === array.lastIndexOf(v); }); this.checkedCities = list; } }, // 多选 handleCheckedCitiesChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.cities.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; this.checkInvert = false; }, }, }; </script> <style> </style>
接口获取省份
<div> <el-checkbox v-model="checkAll" @change="handleCheckAllChange" :indeterminate="isIndeterminate" >全选</el-checkbox > <el-checkbox v-model="checkInvert" @change="handleInvertCheckChange" >反选</el-checkbox > <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" > <el-checkbox v-for="city in provinceList" :label="city" :key="city">{{ city.label }}</el-checkbox> </el-checkbox-group> </div> <div slot="footer" style="text-align:center;"> <el-button @click="historyPriceFlag = false" type="primary">确定</el-button> <el-button @click="historyPriceFlag = false">取消</el-button> </div>
data
provinceList: [], checkAll: false, checkInvert: false, checkedCities: ["上海", "北京"], isIndeterminate: true,
js
// 全选 handleCheckAllChange(val) { console.log(this.provinceList) this.checkedCities = val ? this.provinceList : []; this.isIndeterminate = false; this.checkInvert = false; }, // 反选 handleInvertCheckChange(val) { let cities = this.provinceList; console.log(cities) let checkedCities = this.checkedCities; if (checkedCities.length === 0) { checkedCities = val ? cities : []; } else if (checkedCities.length === cities.length) { this.checkedCities = []; this.checkAll = false; } else { let list = cities.concat(checkedCities).filter((v, i, array) => { return array.indexOf(v) === array.lastIndexOf(v); }); this.checkedCities = list; } }, // 多选 handleCheckedCitiesChange(value) { console.log(value) let checkedCount = value.length; this.checkAll = checkedCount === this.provinceList.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.provinceList.length; this.checkInvert = false; console.log(this.provinceList) },
created() { // 获取省市区列表 getAreaList().then(res => { if (res.code == 200) { this.provinceList = res.data } }) }, 标签:el,checkbox,false,val,反选,length,cities,provinceList,checkedCities From: https://www.cnblogs.com/shuihanxiao/p/17324806.html