举个例子。比如选择星期。一周七天
2种方法。思密达。。。。第一种带局限性。笨办法,也发出来大家看看(推荐使用第二种)
这是方式的值是组件自带的值方式
const cityOptions = ['周一', '周二', '周三', '周四','周五','周六','周天']
<template>
<div>
<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>
</div>
</template>
<script>
const cityOptions = ['周一', '周二', '周三', '周四','周五','周六','周天']
export default {
data() {
return {
checkAll: false,
checkedCities: [],
cities: cityOptions,
isIndeterminate: true,
arr:[]
}
},
methods: {
handleCheckAllChange(val) {
let tempArr = []
this.checkedCities = val ? cityOptions : []
this.isIndeterminate = false
// console.log(this.checkedCities)
// console.log(val)
if (this.checkedCities != []) {
if(val == true){
tempArr = [1,2,3,4,5,6,0]
this.arr = tempArr
}else if(val==false){
tempArr = []
this.arr = tempArr
}
}
console.log(this.arr)
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
var tempArr = []
for(let i=0;i<value.length;i++){
if(value[i] === '周一') {
tempArr.push(1)
}else if(value[i] === '周二'){
tempArr.push(2)
}else if(value[i] === '周三'){
tempArr.push(3)
}else if(value[i] === '周四'){
tempArr.push(4)
}else if(value[i] === '周五'){
tempArr.push(5)
}else if(value[i] === '周六'){
tempArr.push(6)
}else if(value[i] === '周天'){
tempArr.push(0)
}
}
this.arr = tempArr
console.log(this.arr)
}
}
}
</script>
<style scoped>
</style>
之后UP想了一下。不对。后台反过来的数组不应该是这种。大部分都应该是obj的形式
于是乎。
const cityOptions = [{a:'周一',b:1}, {a:'周二',b:2}, {a:'周三',b:3},{a:'周四',b:4},{a:'周五',b:5},{a:'周六',b:6},{a:'周天',b:7}];
对吧这种形式才对。说不定可能有很多很多。万一叫你把一个月都列出来也说不定。
继续上代码
<template> <div style="height: 1000px"> <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.b" :key="city.b">{{city.a}}</el-checkbox> </el-checkbox-group> </div> </template> <script> const cityOptions = [{a:'周一',b:1}, {a:'周二',b:2}, {a:'周三',b:3},{a:'周四',b:4},{a:'周五',b:5},{a:'周六',b:6},{a:'周天',b:7}]; export default { name: "tourSpecialEdition", components: {}, data(){ return{ checkAll: false, checkedCities: [], cities: cityOptions, isIndeterminate: false } }, created() {}, mounted() {}, methods: { handleCheckAllChange(val) { const arr = val ? cityOptions : []; this.checkedCities = []; arr.map(item => { this.checkedCities.push(item.b); console.log(this.checkedCities.sort()) }); this.isIndeterminate = false; }, handleCheckedCitiesChange(value) { let arrTime = value this.checkedCities = arrTime console.log(this.checkedCities.sort()) let checkedCount = value.length; this.checkAll = checkedCount === this.cities.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; } } } </script> <style scoped> </style>