checkbox多选框，indeterminate 状态
举个例子。比如选择星期。一周七天
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 = valuethis.checkedCities = arrTimeconsole.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>
checkbox多选框，indeterminate 状态相关推荐
- jQuery: 判断checkbox复选框是否被选中
本文介绍如何用jQuery获取checkbox复选框选中状态,或验证是否选中或取消选中复选框. jQuery: 判断checkbox复选框是否被选中 这里我们使用jQuery .is()方法和匹配的c ...
- html5复选框控制按钮状态,HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件...
本篇教程探讨了HTML5如何添加原生radio按钮和checkbox复选框转换为非常好看的滑动开关按钮的插件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < ...
- CheckBox多选框
CheckBox多选框 基础用法 单独使用可以表示两种状态之间的切换,写在标签中的内容为checkbox按钮的介绍 在el-checkbox元素中定义v-model绑定变量,单一的checkbox中, ...
- jQuery复选框选中状态更改事件
本文翻译自:jQuery checkbox checked state changed event I want an event to fire client side when a checkbo ...
- js checkbox复选框实现单选功能
本文仅供学习交流使用,demo下载见文末 js checkbox复选框实现单选功能 <script type="text/javascript">$(":ch ...
- checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
- Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框
1.Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目 配置项 类型 说明 boxLabel String 紧靠复选框的文字描述 boxLabelAl ...
- 实战总结（二）—— CheckBox复选框和SpannableString
CheckBox复选框和SpannableString 项目评估说登录时默认选择已阅读相关协议,应有复选框,于是做出以下改动:默认不勾选checkBox,在不勾选checkBox情况下无法登,会弹出T ...
- html5中如何让一个动画框左右上下浮动,HTML5 SVG如何实现炫酷checkbox复选框动画特效...
简要教程 这是一款HTML5 SVG炫酷checkbox复选框动画特效.该checkbox动画特效使用svg来构建复选框效果,然后通过CSS3动画来控制复选框的选中和取消选中状态,效果非常炫酷. 使用 ...
- 纯CSS设置Checkbox复选框控件的样式
下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要 ...
最新文章
- Silverlight学习笔记十七BingMap（六）之获取图片系统的图片信息ImageryService的应用...
- AAAI 2020论文解读：商汤科技提出新弱监督目标检测框架
- 李飞飞出任推特董事会成员：将利用AI技术持续推动变革
- Python系统命令操作
- java 数字的位数_Java判断数字位数的方法总结
- Spring DI(依赖注入)
- 产品总监如何做产品规划？
- 007. VMware 创建共享文件夹
- 63. windows php 加载不了 curl
- Redis(1)——NoSQL数据库简介
- linux使用小米随身wifi热点,【L】小米随身WiFi，Linux下AP热点驱动（开源）
- 计算机专业的男生喜欢你,男生真心喜欢你的五个表现
- 神经网络入门书籍推荐,神经网络方向研究生
- 【数据结构机试复习2】 赛马 猴子选大王
- 1982年版《茶馆》内容简要回顾
- SQL获取当前周的开始日期和结束日期
- HTTPS之TLS证书
- GPU释放显存-----无进程但显存占满解决方法
- ELK - Filebeat重启之后不读Log了？Registry file is too large
- linux下eclipse修改tab,eclipse 更改 tab 缩进字符数