elementUI 学习入门之 checkbox 复选框

Posted xsmile

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 的不确定状态,一般用于实现全选。

技术图片
 1 <template>
 2   <el-checkbox indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
 3     全选
 4   </el-checkbox>
 5   <div style="margin:10px"></div>
 6   <el-checkbox-group v-model="checkCities" @change="handleCheckedCitiesChange">
 7     <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
 8   </el-checkbox-group>
 9 </template>
10 
11 const cityOptions = ["上海", "北京", "郑州", "武汉"];
12 var Main = {
13 
14     data () {
15       return {
16         cities: cityOptions,
17         checkCities:["郑州", "北京"],
18       };
19     },
20     methods:{
21         handleCheckAllChange(val){
22           this.checkCities=val ? cityOptions : [];
23         this.indeterminate = false;
24       },
25     },
26   }
27 var Ctor = Vue.extend(Main)
28 new Ctor().$mount(‘#app‘)
全选

技术图片

 

以上是关于elementUI 学习入门之 checkbox 复选框的主要内容,如果未能解决你的问题,请参考以下文章

elementUI 学习入门之 container 布局容器

ElementUI多选框组件

elementUI限制选中的checkbox的最大个数

elementui 单个checkbox数据回显

elementui 单个checkbox数据回显

elementUI多选框获取值