CheckBox 复选框

与单选框基本类似。如:按钮样式、带边框、复选框按钮大小。

eg:

<template>
<el-checkbox-group v-model="selectCities" min='2' max="3">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template> const cityOptions = ["上海", "北京", "郑州", "武汉"];
var Main = { data () {
return {
cities: cityOptions,
selectCities: ["上海", "郑州"],
};
},
methods:{ },
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

indeterminate 状态

indeterminate 属性用以表示 CheckBox 的不确定状态,一般用于实现全选。

 <template>
<el-checkbox indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
全选
</el-checkbox>
<div style="margin:10px"></div>
<el-checkbox-group v-model="checkCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</template> const cityOptions = ["上海", "北京", "郑州", "武汉"];
var Main = { data () {
return {
cities: cityOptions,
checkCities:["郑州", "北京"],
};
},
methods:{
handleCheckAllChange(val){
this.checkCities=val ? cityOptions : [];
this.indeterminate = false;
},
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

全选

elementUI 学习入门之 checkbox 复选框的更多相关文章

  1. vue基于element-ui的三级CheckBox复选框

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...

  2. 通过编写串口助手工具学习MFC过程——(五)添加CheckBox复选框

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  3. php获取checkbox复选框的内容

    php获取checkbox复选框的内容   由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...

  4. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  5. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  6. php怎么获取checkbox复选框的内容?

    由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...

  7. checkbox复选框样式

    随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...

  8. php checkbox复选框值的获取与checkbox默认值输出方法

    php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...

  9. js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false

    用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...

随机推荐

  1. sql分页demo

    ALTER proc [dbo].[ProcGetUserInfoPageInfoByUserName] ), @PageIndex int, @PageSize int as Begin selec ...

  2. .Net公用代码

    创建txt文本文件 #region 创建txt文本文件 /// <summary> /// 创建txt文本文件 /// </summary> /// <param nam ...

  3. JS操作CSS随机改变网页背景

    今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...

  4. XML & JSON---iOS-Apple苹果官方文档翻译

      技术博客http://www.cnblogs.com/ChenYilong/   新浪微博http://weibo.com/luohanchenyilong   //转载请注明出处--本文永久链接 ...

  5. 使用 pjax 载入的新页面,新页面上 类方法 无法被触发?

    在父页面上有定义类似 $(".class").click(function(){ ... }) 经过pjax 载入后的新页面 点击后没有触发事件 在segmentfault 上提问 ...

  6. kali2.0安装虚拟机工具

    kali2.0无法安装虚拟机工具,显示VMware Tools无法用于该虚拟机,或者安装之后无法进行复制.粘贴等操作. 解决办法: step1: 更换源 root@starnight:~# vim / ...

  7. HDU 1172 猜数字 (模拟)

    题目链接 Problem Description 猜数字游戏是gameboy最喜欢的游戏之一.游戏的规则是这样的:计算机随机产生一个四位数,然后玩家猜这个四位数是什么.每猜一个数,计算机都会告诉玩家猜 ...

  8. HDU 1521 排列组合 (母函数)

    题目链接 Problem Description 有n种物品,并且知道每种物品的数量.要求从中选出m件物品的排列数.例如有两种物品A,B,并且数量都是1,从中选2件物品,则排列有"AB&qu ...

  9. Linux必备工具Tmux

    之前介绍了Linux的Screen命令,今天介绍一个更为强大的终端工具Tmux. Tmux 是一个用于在一个终端窗口中运行多个终端会话的工具.它基本能替代nohup以及screen,甚至比它们更为强大 ...

  10. Angular 2.0 基础:服务

    什么是服务(Service) 在Angular 2 中我们提到的服务 service 一般指的是 哪些能够被其他组件或者指令调用的 单一的,可共享的 代码块.当然,通过服务可以将数据和组件分开,这样就 ...