【区分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 时查阅其官方文档以获取最新的属性和功能信息。

相关推荐
Mike_jia12 小时前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼12 小时前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞12 小时前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子12 小时前
JS 打造动态表格
前端·javascript·面试
excel12 小时前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_012 小时前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code13 小时前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
百思可瑞教育13 小时前
ActiveMQ、RocketMQ、RabbitMQ、Kafka 的全面对比分析
vue.js·分布式·rabbitmq·rocketmq·activemq·北京百思可瑞教育·百思可瑞教育
li357420 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj21 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js