【区分vue2和vue3下的element UI Checkbox 多选框组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 Vue 2 中，Element UI 提供了 el-checkbox 和 el-checkbox-group 组件用于多选框功能。而在 Vue 3 中，Element UI 没有直接支持 Vue 3，但有一个名为 Element Plus 的项目提供了与 Element UI 类似但支持 Vue 3 的组件集。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中 el-checkbox 和 el-checkbox-group 组件的属性、事件和方法，并给出示例。

Vue 2 的 Element UI

el-checkbox

属性：

• value：多选框的值（在 el-checkbox-group 中使用时）
• label：多选框的 label（在 el-checkbox-group 中使用时）
• disabled：是否禁用多选框
• true-value：选中时的值，默认为 true
• false-value：未选中时的值，默认为 false
• border：是否显示边框
• indeterminate：设置 indeterminate 状态，只负责样式控制，值不会设置为中间态
• name：原生 name 属性

事件：

• change：值改变时触发

方法：

• el-checkbox 本身没有提供方法，但你可以通过事件监听和 Vue 实例的属性来操作它。

el-checkbox-group

属性：

• v-model：绑定值，选中多选框的数组
• size：多选框组的大小，如 medium、small、mini
• fill：按钮形式的 Checkbox 组件内容时是否填充背景色
• text-color：按钮形式的 Checkbox 激活时的文本颜色
• fill-color：按钮形式的 Checkbox 激活时的填充色和边框色

事件：

• change：值改变时触发

示例

<template>
  <el-checkbox-group v-model="checkedList">
    <el-checkbox label="选项1"></el-checkbox>
    <el-checkbox label="选项2"></el-checkbox>
    <el-checkbox label="选项3" :disabled="true"></el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkedList: []
    };
  },
  watch: {
    checkedList(newVal) {
      console.log('选中的值:', newVal);
    }
  }
};
</script>

Vue 3 的 Element Plus

在 Element Plus 中，el-checkbox 和 el-checkbox-group 的使用与 Element UI 类似，但可能会有一些新的属性或调整。你应该查阅 Element Plus 的官方文档以获取最新的信息。

el-checkbox 和 el-checkbox-group

属性 和 事件 与 Vue 2 中的 Element UI 类似，但可能会有一些新增或移除的属性。

示例

<template>
  <el-checkbox-group v-model="checkedList">
    <el-checkbox label="选项1"></el-checkbox>
    <el-checkbox label="选项2"></el-checkbox>
    <el-checkbox label="选项3" :disabled="true"></el-checkbox>
  </el-checkbox-group>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const checkedList = ref([]);

    watch(checkedList, (newVal) => {
      console.log('选中的值:', newVal);
    });

    return {
      checkedList
    };
  }
};
</script>

请注意，在 Vue 3 的 Composition API 中，我们使用 ref 来创建响应式数据，并使用 watch 来监听数据变化。示例中的其他部分与 Vue 2 中的示例类似。

确保在使用 Element Plus 时查阅其官方文档以获取最新的属性和功能信息。