el-checkbox详解

一.曾用法：使用多选框进行互斥

<el-checkbox-group v-model="checkList" @change="handleCheckboxChange">

            <el-checkbox label="fenhaobiao">分耗表</el-checkbox>

            <el-checkbox label="qianmihaobiao">千米耗表</el-checkbox>

</el-checkbox-group>

// 监听多选框的变化

function handleCheckboxChange(value) {

  checkList.value = checkList.value.slice(-1);

}

二. 大小

改变框的大小：：deep（.el-checkbox.el-checkbox--large .el-checkbox__inner）

改变字体大小：：deep（.el-checkbox.el-checkbox--large .el-checkbox__label）

三.属性

1. v-model / model-value:

   • 用途: 双向绑定复选框的状态。如果是单个复选框，绑定类型为 Boolean；如果是多个复选框，绑定类型为 Array。

2. label:

   • 用途: 当 el-checkbox 作为数组的一部分时，label 表示该复选框对应的值。

3. indeterminate:

   • 用途: 设置复选框的不确定状态（半选状态）。
   • 默认值: false

4. border:

   • 用途: 是否显示边框。
   • 默认值: false

5. size:

   • 用途: 设置复选框的尺寸，可选值为 medium、small、mini。

6. disabled:

   • 用途: 是否禁用该复选框。
   • 默认值: false

7. name:

   • 用途: 复选框的名称，主要用于表单提交。

8. true-label:

   • 用途: 选中时的值。

9. false-label:

   • 用途: 未选中时的值。

10. tabindex:

    • 用途: 设置复选框的 tabindex。

11. validate-event:

    • 用途: 是否在输入框失去焦点时触发表单验证。
    • 默认值: true

12. id:

    • 用途: 复选框的唯一标识符。

13. controls:

    • 用途: 是否显示控制按钮（仅在 el-checkbox-group 中有效）。

14. controls-position:

    • 用途: 控制按钮的位置，可选值为 right（仅在 el-checkbox-group 中有效）。

15. min:

    • 用途: 最少选中的数量（仅在 el-checkbox-group 中有效）。

16. max:

    • 用途: 最多选中的数量（仅在 el-checkbox-group 中有效）。

四.示例

<template>
  <div>
    <h2>Checkbox 示例</h2>
    
    <!-- 基本用法 -->
    <el-checkbox v-model="basicChecked">基本用法</el-checkbox>
    <!-- 使用 v-model 进行双向数据绑定 -->

    <!-- 单个复选框 -->
    <el-checkbox v-model="singleChecked">单个复选框</el-checkbox>
    <!-- v-model 绑定一个布尔值，表示复选框的选中状态 -->

    <!-- 多个复选框 -->
    <el-checkbox v-model="multipleChecked" label="Option 1">选项1</el-checkbox>
    <el-checkbox v-model="multipleChecked" label="Option 2">选项2</el-checkbox>
    <!-- v-model 绑定一个数组，label 属性指定每个复选框的值 -->

    <!-- 不确定状态 -->
    <el-checkbox :indeterminate="isIndeterminate" v-model="indeterminateChecked">不确定状态</el-checkbox>
    <!-- indeterminate 属性设置为 true 时，复选框会显示为不确定状态（半选状态） -->

    <!-- 边框 -->
    <el-checkbox v-model="borderChecked" border>带边框</el-checkbox>
    <!-- border 属性设置为 true 时，复选框会显示边框 -->

    <!-- 尺寸 -->
    <el-checkbox v-model="sizeChecked" size="large">大尺寸</el-checkbox>
    <el-checkbox v-model="sizeChecked" size="default">默认尺寸</el-checkbox>
    <el-checkbox v-model="sizeChecked" size="small">小尺寸</el-checkbox>
    <!-- size 属性设置复选框的尺寸，可选值为 large、default、small -->

    <!-- 禁用状态 -->
    <el-checkbox v-model="disabledChecked" disabled>禁用状态</el-checkbox>
    <!-- disabled 属性设置为 true 时，复选框将被禁用 -->

    <!-- 名称 -->
    <el-checkbox v-model="nameChecked" name="exampleName">名称属性</el-checkbox>
    <!-- name 属性设置复选框的名称，主要用于表单提交 -->

    <!-- 自定义选中和未选中值 -->
    <el-checkbox v-model="customLabelChecked" true-label="yes" false-label="no">自定义值</el-checkbox>
    <!-- true-label 和 false-label 属性分别设置选中和未选中时的值 -->

    <!-- tabindex -->
    <el-checkbox v-model="tabindexChecked" tabindex="1">Tabindex 属性</el-checkbox>
    <!-- tabindex 属性设置复选框的 tabindex -->

    <!-- validate-event -->
    <el-checkbox v-model="validateEventChecked" :validate-event="false">禁用验证事件</el-checkbox>
    <!-- validate-event 属性设置是否在输入框失去焦点时触发表单验证 -->

    <!-- id -->
    <el-checkbox v-model="idChecked" id="uniqueId">ID 属性</el-checkbox>
    <!-- id 属性设置复选框的唯一标识符 -->

    <!-- auto-width -->
    <el-checkbox v-model="autoWidthChecked" auto-width>自动调整宽度</el-checkbox>
    <!-- auto-width 属性设置是否自动调整宽度 -->

    <!-- 在 el-checkbox-group 中使用 -->
    <el-checkbox-group v-model="groupChecked" :min="1" :max="2">
      <el-checkbox label="Option A">选项A</el-checkbox>
      <el-checkbox label="Option B">选项B</el-checkbox>
      <el-checkbox label="Option C">选项C</el-checkbox>
    </el-checkbox-group>
    <!-- el-checkbox-group 组件用于管理多个复选框 -->
    <!-- min 和 max 属性设置最少和最多选中的数量 -->

    <!-- 当前值展示 -->
    <p>当前值: {{ multipleChecked }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 基本值
const basicChecked = ref(false)

// 单个复选框
const singleChecked = ref(false)

// 多个复选框
const multipleChecked = ref([])

// 不确定状态
const indeterminateChecked = ref(false)
const isIndeterminate = ref(true) // 设置不确定状态

// 边框
const borderChecked = ref(false)

// 尺寸
const sizeChecked = ref(false)

// 禁用状态
const disabledChecked = ref(false)

// 名称
const nameChecked = ref(false)

// 自定义选中和未选中值
const customLabelChecked = ref('no')

// tabindex
const tabindexChecked = ref(false)

// validate-event
const validateEventChecked = ref(false)

// id
const idChecked = ref(false)

// auto-width
const autoWidthChecked = ref(false)

// el-checkbox-group
const groupChecked = ref([])
</script>

<style scoped>
/* 添加一些样式以区分各个示例 */
.el-checkbox {
  margin-bottom: 10px;
}
</style>