elementUI 学习入门之 checkbox 复选框
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 复选框的更多相关文章
- vue基于element-ui的三级CheckBox复选框
最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...
- 通过编写串口助手工具学习MFC过程——(五)添加CheckBox复选框
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- php获取checkbox复选框的内容
php获取checkbox复选框的内容 由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- php怎么获取checkbox复选框的内容?
由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...
- checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
- php checkbox复选框值的获取与checkbox默认值输出方法
php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...
- js做全选,用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false
用一个checkbox复选框做多个checkbox复选框的全选按钮,有一个复选框未被选择时,全选按钮的checked就为false,当所有checkbox都被选中时,全选按钮也被选中. 详解: 有两种 ...
随机推荐
- sql分页demo
ALTER proc [dbo].[ProcGetUserInfoPageInfoByUserName] ), @PageIndex int, @PageSize int as Begin selec ...
- .Net公用代码
创建txt文本文件 #region 创建txt文本文件 /// <summary> /// 创建txt文本文件 /// </summary> /// <param nam ...
- JS操作CSS随机改变网页背景
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...
- XML & JSON---iOS-Apple苹果官方文档翻译
技术博客http://www.cnblogs.com/ChenYilong/ 新浪微博http://weibo.com/luohanchenyilong //转载请注明出处--本文永久链接 ...
- 使用 pjax 载入的新页面,新页面上 类方法 无法被触发?
在父页面上有定义类似 $(".class").click(function(){ ... }) 经过pjax 载入后的新页面 点击后没有触发事件 在segmentfault 上提问 ...
- kali2.0安装虚拟机工具
kali2.0无法安装虚拟机工具,显示VMware Tools无法用于该虚拟机,或者安装之后无法进行复制.粘贴等操作. 解决办法: step1: 更换源 root@starnight:~# vim / ...
- HDU 1172 猜数字 (模拟)
题目链接 Problem Description 猜数字游戏是gameboy最喜欢的游戏之一.游戏的规则是这样的:计算机随机产生一个四位数,然后玩家猜这个四位数是什么.每猜一个数,计算机都会告诉玩家猜 ...
- HDU 1521 排列组合 (母函数)
题目链接 Problem Description 有n种物品,并且知道每种物品的数量.要求从中选出m件物品的排列数.例如有两种物品A,B,并且数量都是1,从中选2件物品,则排列有"AB&qu ...
- Linux必备工具Tmux
之前介绍了Linux的Screen命令,今天介绍一个更为强大的终端工具Tmux. Tmux 是一个用于在一个终端窗口中运行多个终端会话的工具.它基本能替代nohup以及screen,甚至比它们更为强大 ...
- Angular 2.0 基础:服务
什么是服务(Service) 在Angular 2 中我们提到的服务 service 一般指的是 哪些能够被其他组件或者指令调用的 单一的,可共享的 代码块.当然,通过服务可以将数据和组件分开,这样就 ...