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 复选框

indeterminate 状态

最新文章

热门文章