Checkbox 多选框的使用

基础用法

el-checkbox元素中定义v-model绑定变量,单一的checkbox中,默认绑定变量的值会是Boolean,选中为true

禁用状态

设置disabled属性即可。

多选框组

checkbox-group元素能把多个 checkbox 管理为一组,只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkboxlabel属性是该 checkbox 对应的值,若该标签中无内容,则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应,如果存在指定的值则为选中状态,否则为不选中。

ndeterminate 状态

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

可选项目数量的限制

使用 minmax 属性能够限制可以被勾选的项目的数量。

按钮样式

只需要把el-checkbox元素替换为el-checkbox-button元素即可。此外,Element 还提供了size属性。

带有边框

设置border属性可以渲染为带有边框的多选框。

代码:

复制代码
<template>
    <div class="checkbox">
        
          <!-- `checked` 为 true 或 false -->
          <el-checkbox v-model="checked">可选备选项</el-checkbox>

          <el-checkbox v-model="checked1" disabled>不可选备选项1</el-checkbox>
          <el-checkbox v-model="checked2" disabled>不可选备选项2</el-checkbox>
        
       
          <el-checkbox-group v-model="checkList" >
            <el-checkbox label="多选框A"></el-checkbox>
            <el-checkbox label="多选框B"></el-checkbox>
            <el-checkbox label="多选框C"></el-checkbox>
            <el-checkbox label="禁选" disabled></el-checkbox>
            <el-checkbox label="禁选并选中" disabled></el-checkbox>
          </el-checkbox-group>
        
        <p>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <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>
        </p>
        <p>
          <el-checkbox-group 
            v-model="checkedCities1"
            :min="1"
            :max="2">
          <el-checkbox v-for="city1 in cities1" :label="city1" :key="city1">{{ city1 }}</el-checkbox>
          </el-checkbox-group>
        </p>
        <p>
          <el-checkbox-group v-model="checkboxGroup1" size="medium" fill="pink" text-color="red">
            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
          </el-checkbox-group>
        </p>
        <p>
          <el-checkbox-group v-model="checkboxGroup2" size="small">
            <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '上海'" :key="city">{{ city }}</el-checkbox-button>
          </el-checkbox-group>
        </p>
        <p>
          <el-checkbox-group v-model="checkboxGroup3" size="mini" disabled>
            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox-button>
          </el-checkbox-group>
        </p>
        <p>
            <el-checkbox v-model="checked3" label="备选框A" border size="medium"></el-checkbox>
            <el-checkbox v-model="checked4" label="备选框B" border></el-checkbox><!-- 边框 -->
        </p>
        <p>
            <el-checkbox-group v-model="checkboxGroup4" size="small">
                <el-checkbox label="备选框C" border ></el-checkbox>
                <el-checkbox label="不可选备选框C" border  disabled></el-checkbox>
            </el-checkbox-group>
        </p>
        <p>
            <el-checkbox-group v-model="checkboxGroup5" size="mini" disabled>
                <el-checkbox label="备选项D" border></el-checkbox>
                <el-checkbox label="备选项E" border></el-checkbox>
            </el-checkbox-group>
        </p>
    </div>
</template>

<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
      data () {
        return {
          checked:true,
          checked1: false,
          checked2: true,
          checkList:['多选框A','禁选并选中'],
          //多选选中上海北京
          checkAll: false,
          checkedCities: ['上海', '北京'],
          cities: cityOptions,
          isIndeterminate: true,

          checkedCities1:['广州','深圳'],
          cities1:cityOptions,

          checkboxGroup1:['上海'],
          checkboxGroup2:['北京'],
          checkboxGroup3:['广州'],

          checked3: true,
          checked4: false,
          checkboxGroup4: [],
          checkboxGroup5: ['备选项D']
        };
      },

      methods:{
        handleCheckAllChange(val){
          this.checkedCities = val ? cityOptions : [];
          this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value){
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
      }
    };
  </script>
相关推荐
爱的叹息20 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
遗憾随她而去.27 分钟前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19991 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin1 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快1 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛1 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼2 小时前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_2 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
还是鼠鼠2 小时前
Android移动应用开发入门示例:Activity跳转界面
android·前端·gitee·android studio·android-studio