vue el-radio-group多选封装及使用

基于Element UI库的Vue组件,实现了一个单选/多选框组合的效果,可以根据 type 属性的不同值来切换单选框(默认)和按钮式单选框/多选框。

创建组件index.vue (src/common-ui/radioGroup/index.vue)
<template><el-radio-groupv-model="hValue":size="size":disabled="disabled":text-color="textColor":fill="fill"><template v-for="(item, index) in dataSource"><el-radio-buttonv-if="type === 'button'":key="index":label="item[hProps.value]":disabled="item[hProps.disabled]":name="item[hProps.name]">{{ item[hProps.label] }}</el-radio-button><el-radiov-else:key="index+'else'":label="item[hProps.value]":disabled="item[hProps.disabled]":border="item[hProps.border] || border":size="item[hProps.size]":name="item[hProps.name]":class="{ vertical }">{{ item[hProps.label] }}</el-radio></template></el-radio-group>
</template><script>export default {name: "HRadioGroup",props: {border: Boolean,dataSource: {type: Array,label: [String, Number],value: [String, Number, Boolean],disabled: {type: Boolean,default: false},border: {type: Boolean,default: false},size: {type: String,validator(value) {return ["medium", "small", "mini"].indexOf(value) !== -1;}},name: String},disabled: {type: Boolean,default: false},fill: String,size: {type: String,validator(value) {return ["medium", "small", "mini"].indexOf(value) !== -1;}},textColor: String,type: {type: String,default: "normal",validator(value) {return ["normal", "button"].indexOf(value) !== -1;}},value: {type: [String, Number, Boolean]},vertical: Boolean,props: {type: Object,default() {return {};}}},computed: {hValue: {get() {return this.value;},set(value) {this.$emit("input", value);this.$emit("change", value);}},hProps() {return {label: "label",value: "value",disabled: "disabled",border: "border",size: "size",name: "name",...this.props};}}};
</script><style lang="scss" scoped>.vertical {display: block;margin-left: 0 !important;& + .vertical {margin-top: 10px;}}
</style>
页面引入
  • 在需要使用HRadioGroup组件的地方,通过import语句引入组件注册并使用

<template><div><h-radio-group:value="selectedValue":data-source="dataSource"@change="val => handleRadioGroupChange(val)"></h-radio-group></div>
</template>
<script>import HRadioGroup from '@/common-ui/radioGroup/index'export default {components: {HRadioGroup},data() {return {filterVal: '',dataSource: [],selectedValue: ''}},methods: {handleRadioGroupChange(val, row) {console.log(val,'选中的数据')},}// ...}
</script>

确保你已经安装了Vue.js和Element UI,并在项目中引入它们。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/190332.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AirServer怎么用?如何AirServer进行手机投屏

什么是 AirServer&#xff1f; AirServer 是适用于 Mac 和 PC 的先进的屏幕镜像接收器。 它允许您接收 AirPlay 和 Google Cast 流&#xff0c;类似于 Apple TV 或 Chromecast 设备。AirServer 可以将一个简单的大屏幕或投影仪变成一个通用的屏幕镜像接收器 &#xff0c;是一款…

数据结构:图文详解单链表的各种操作(头插法,尾插法,任意位置插入,删除节点,查询节点,求链表的长度,清空链表)

目录 一.什么是链表 二.链表的实现 节点的插入 头插法 尾插法 指定位置插入 节点的删除 删除第一次出现的关键字节点 删除所有关键字节点 节点的查找 链表的清空 链表的长度 前言&#xff1a;在上一篇文章中&#xff0c;我们认识了线性数据结构中的顺序表&#xff0…

Hdoop学习笔记(HDP)-Part.04 基础环境配置

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …

接口测试 —— requests 的基本了解

● requests介绍及安装 ● requests原理及源码介绍 ● 使用requests发送请求 ● 使用requests处理响应 ● get请求参数 ● 发送post请求参数 ● 请求header设置 ● cookie的处理 ● https证书的处理 ● 文件上传、下载 requests介绍 ● requests是python第三方的HTTP…

树莓派4B机器狗的串口通信驱动库pyserial实践

pyserial是一个串口通信驱动库&#xff0c;常用的Windows、Linux、MacOS等都可以安装&#xff0c;这里我使用的是树莓派4B来测试&#xff0c;这块板子还是很强大的&#xff0c;我们可以通过pyserial这个库来操作基于这块板子上的机器狗之类的设备。 1、四足机器狗 本人的是四…

【开源】基于JAVA语言的考研专业课程管理系统

项目编号&#xff1a; S 035 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S035&#xff0c;文末获取源码。} 项目编号&#xff1a;S035&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高…

深信服AD负载均衡频繁掉线故障分析

一个由114.114.114.114引起的AD异常 客户反馈深信服负载均衡链路频繁掉线&#xff0c;具体故障现象如下 可以获取到IP地址、网关 两分钟掉一次&#xff0c;持续一个多月&#xff0c;求IT的心理阴影面积&#xff01; 链路监视器只设置了一个114.114.114.114 处理流程&#xff…

SCA技术进阶系列(四):DSDX SBOM供应链安全应用实践

一、SBOM的发展趋势 数字时代&#xff0c;软件已经成为维持生产生活正常运行的必备要素之一。随着容器、中间件、微服务、 DevOps等技术理念的演进&#xff0c;软件行业快速发展&#xff0c;但同时带来软件设计开发复杂度不断提升&#xff0c;软件供应链愈发复杂&#xff0c;软…

MySQL 基础、进阶、运维的学习笔记

1. MySQL 基础篇 1.1 MySQL 概述 1.1.1 数据库相关概念 数据库(Database, 简称 DB): 存储数据的仓库&#xff0c;数据是有组织的进行存储。 数据库管理系统(Database Management System, 简称 DBMS): 操作和管理数据库的大型软件。 SQL(Structured Query Language, 简称 S…

Linux:进程间通信

目录 一、关于进程间通信 二、管道 pipe函数 管道的特点 匿名管道 命名管道 mkfifo 三、system v共享内存 shmget函数(创建) ftok函数(生成key) shmctl函数(删除) shmat/dt函数(挂接/去关联) 四、初识信号量 一、关于进程间通信 首先我们都知道&#xff0c;进程运…

计算机组成学习-计算机系统概述总结

1、计算机系统概述 日常见到的计算机有显示器、键盘、鼠标、音箱、主机箱等&#xff1b;主机箱中有&#xff1a;主板、CPU、硬盘、内存、显卡、声卡等&#xff1b; 1.1 计算机系统层次结构 1.2 计算机系统的基本组成 包括硬件系统和软件系统两部分。 1.2.1 计算机硬件 计算…

DCCK“启航计划“3+2第一课机器视觉导论

用相机代替人眼去获取图像&#xff0c;然后处理图像&#xff0c;给出指令。 如&#xff1a;相机获取可口可乐的液面高度图片&#xff0c;通过连接线床给图像处理程序&#xff0c;程序给出合格不合格的判断再执行后续操作 作用&#xff1a;机器不会疲劳&#xff0c;机器判断标准…

深入理解前端路由:构建现代 Web 应用的基石(上)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

CentOS 7 配置tomcat

简介 Tomcat是一个使用Java编写的开源Web应用服务器,是由Apache Software Foundation管理的一个项目。它是一个轻量级的应用服务器,可以下载、安装和使用,而且还提供了许多高级功能,例如支持Java Servlet、JavaServer Pages (JSP)和JavaServer Faces (JSF) 等JavaEE技术,…

GoWin FPGA--- startup2

clock Click Tools\IP Core Generator\rPLL, and open the configure file 原语 for Clock 双击选项&#xff0c;生产对应的代码&#xff0c;Copy到制定的地点。 右侧有对应的说明文件

【spring(六)】WebSocket网络传输协议

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 核心概要&#xff1a; 概念介绍&#xff1a; 对比HTTP协议&#xff1a;⭐ WebSocket入门案例&#xff1a;⭐ 核心概要&#xff1a; websocket对比http 概念介绍&#xff1a; WebSocket是Web服务器的一个组件…

权限的树形列表展示——基于APEX FancyTree Select

select distinct (o.PERMISSION_ID) as id, --数据ido.PARENT_PERMISSION_ID as PARENT_ID, --父ido.PERMISSION_NAME as title, --显示的标题o.PERMISSION_ID as VALUE, --标题对应的值1 as TYPE,casewhen (select cou…

mac安装elasticsearch

下载地址&#xff1a; Past Releases of Elastic Stack Software | Elastic https://www.elastic.co/cn/downloads/past-releases#elasticsearch 选择7.10版本 进入es bin目录下执行启动命令 ./elasticsearch 会报错 ./elasticsearch-env: line 126: syntax error near u…

基于linux的C语言环境下开源hashmap的使用与测试

C语言中没有C语言中map键值对容器的数据结构&#xff0c;为在C语言中提供一种hashmap数据结构&#xff0c;并提供hashmap的操作方法&#xff0c;具体包括新建、释放、清除、获得缓存数据量、设置数据、获取数据、浏览数据等操作&#xff0c;基于hashmap的开源代码很丰富&#x…

SickOs1.2

信息收集 # Nmap 7.94 scan initiated Wed Nov 22 22:16:22 2023 as: nmap -sn -oN live.nmap 192.168.182.0/24 Nmap scan report for 192.168.182.1 (192.168.182.1) Host is up (0.00028s latency). MAC Address: 00:50:56:C0:00:08 (VMware) Nmap scan report for 192.168…