1 changed files with 36 additions and 0 deletions
@ -0,0 +1,36 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-07-27 09:09:57 |
|||
@ 备注: |
|||
--> |
|||
<template> |
|||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> |
|||
<div style="margin: 15px 0;"></div> |
|||
<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> |
|||
</template> |
|||
<script> |
|||
const cityOptions = ['上海', '北京', '广州', '深圳']; |
|||
export default { |
|||
data() { |
|||
return { |
|||
checkAll: false, |
|||
checkedCities: ['上海', '北京'], |
|||
cities: cityOptions, |
|||
isIndeterminate: true |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleCheckAllChange(val) { |
|||
this.checkedCities = val ? cityOptions : []; |
|||
this.isIndeterminate = false; |
|||
}, |
|||
handleCheckedCitiesChange(value) { |
|||
let checkedCount = value.length; |
|||
this.checkAll = checkedCount === this.cities.length; |
|||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
Loading…
Reference in new issue