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

在 Vue 2 中,Element UI 提供了 el-checkboxel-checkbox-group 组件用于多选框功能。而在 Vue 3 中,Element UI 没有直接支持 Vue 3,但有一个名为 Element Plus 的项目提供了与 Element UI 类似但支持 Vue 3 的组件集。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中 el-checkboxel-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:多选框组的大小,如 mediumsmallmini
  • fill:按钮形式的 Checkbox 组件内容时是否填充背景色
  • text-color:按钮形式的 Checkbox 激活时的文本颜色
  • fill-color:按钮形式的 Checkbox 激活时的填充色和边框色

事件

  • change:值改变时触发
示例
vue 复制代码
<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-checkboxel-checkbox-group 的使用与 Element UI 类似,但可能会有一些新的属性或调整。你应该查阅 Element Plus 的官方文档以获取最新的信息。

el-checkboxel-checkbox-group

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

示例
vue 复制代码
<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 时查阅其官方文档以获取最新的属性和功能信息。

相关推荐
小桥风满袖33 分钟前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心33 分钟前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~37 分钟前
CSS3的新特性
前端·javascript·css3
IT_陈寒43 分钟前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询1 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang1 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼1 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥2 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师8 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js