element Collapse 折叠面板 绑定事件

1. 点击面板触发事件 @change

<el-collapse accordion v-model="activeNames" @change="handleChange"><el-collapse-item title="一致性 Consistency"><div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div><div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div></el-collapse-item>
</el-collapse>handleChangeDemo(val) {debugger
},

若是点击某一行触发事件@click.native,试过@click无效,@click.native就可以了!

<el-collapse-item  v-for="item in productInfoList"  @click.native="searchData(item)"><div>简化流程:设计简洁直观的操作流程;</div>
</el-collapse-item>searchData(item) {// 查询模板debugger
},

2. 折叠面板时,点击标题栏的按钮不展开面板内容:

 通过设置@click.stop="showCollapse()",阻止冒泡,点击按钮不再开展。

 <el-collapse accordion @change="handleChangeDemo"><!-- LI --><el-collapse-item><template slot="title">标题1 <i class="header-icon el-icon-info" @click.stop="showCollapse()"/></template><div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div></el-collapse-item><!-- LI --><el-collapse-item title="效率 Efficiency"><div>简化流程:设计简洁直观的操作流程;</div></el-collapse-item>
</el-collapse>showCollapse() {debugger
}

3. 想要改变折叠面板中icon位置

.ep-collapse-item__arrow {flex: 1 0 auto;order: -1;
}

样式如下

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

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

相关文章

使用Python构建网络爬虫:提取网页内容和图片资源

网络爬虫是一种自动获取网页内容的程序&#xff0c;它可以帮助我们高效地收集网络上的有价值信息。本文将介绍如何使用Python构建网络爬虫&#xff0c;提取网页内容和图片资源。   一、环境准备   1.安装Python环境   首先&#xff0c;确保您已经安装了Python环境。访问P…

2021年06月 C/C++(五级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;数字变换 给定一个包含5个数字&#xff08;0-9&#xff09;的字符串&#xff0c;例如 “02943”&#xff0c;请将“12345”变换到它。 你可以采取3种操作进行变换 &#xff08;1&#xff09;交换相邻的两个数字 &#xff08;2&#xff09;将一个数字加1。如果…

Qt应用开发(基础篇)——进度条 QProgressBar

一、前言 QProgressBar类继承于QWidget&#xff0c;是一个提供了横向或者纵向进度条的小部件。 QProgressBar进度条一般用来显示用户某操作的进度&#xff0c;比如烧录、导入、导出、下发、上传、加载等这些需要耗时和分包的概念&#xff0c;让用户知道程序还在正常的执行中。 …

Git操作

Git 操作方法 Git 是一个分布式版本控制系统&#xff0c;用于管理项目的源代码。 gitee新建仓库提示如下 具体介绍看下面 1. 创建仓库 初始化本地仓库 使用以下命令在本地目录中初始化一个新的 Git 仓库&#xff1a; git init克隆远程仓库 使用以下命令克隆一个远程仓库…

java自动登录 selenium 自动登录并获取cookie

选择操作网页 我用的edge&#xff0c;谷歌我的版本太高没有对应的驱动… 下载Edge的驱动程序&#xff0c;直接解压就好里面只有一个.exe文件 https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ 复制即用&#xff0c;看注释 import com.alibaba.fastjs…

我们的第一个 Qt 窗口程序

Qt 入门实战教程&#xff08;目录&#xff09; Windows Qt 5.12.10下载与安装 为何使用Qt Creator开发QT 本文介绍用Qt自带的集成开发工具Qt Creator创建Qt默认的窗口程序。 本文不需要你另外安装Visual Studio 2022这样的集成开发环境&#xff0c;也不需要你再在Visual St…

Redis.conf 配置文件详解

1、units 单位 配置大小单位&#xff0c;开头定义了一些基本的度量单位&#xff0c;只支持 bytes&#xff0c;不支持bit&#xff0c;并且对大小写 不敏感。 2、INCLUDES 包含 类似于 Spring 配置文件&#xff0c;可以通过 includes 包含&#xff0c;redis.conf 可以作为总文件…

JVM运行时数据区

文章目录 JVM内存结构图1、运行时数据区域JDK 1.7JDK 1.81. 线程栈&#xff08;虚拟机栈&#xff09;2. 本地方法栈3. 程序计数器4. 方法区&#xff08;元空间&#xff09;5. 堆6、运行时常量池&#xff08;Runtime Constant Pool&#xff09;7、直接内存&#xff08;Direct Me…

QOpenGLWidget绘制实时图像

initializeGL()函数&#xff1a; initializeOpenGLFunctions();//创建VBO和VAO对象&#xff0c;并赋予IDglGenVertexArrays(1, &VAO);glGenBuffers(1, &VBO);//绑定VBO和VAO对象glBindVertexArray(VAO);glBindBuffer(GL_ARRAY_BUFFER, VBO);//为当前绑定到target的缓冲…

如何将Word中的中文数字转化为阿拉伯数字

例如这种情况&#xff1a; 需要把这些汉字数字改为阿拉伯数字。 步骤1&#xff1a;在任意位置输入“第章”&#xff0c;然后把光标放到“第”和“章”的中间&#xff0c;然后ctrlf9插入域&#xff0c;在域里面输入 autonum&#xff0c;然后按altf9 显示域值。 按下altF9后 第 …

MySQL怎样删除重复数据,只保留一条?

在实际工作开发过程中&#xff0c;常常会遇到数据库表中存在多条数据重复了&#xff0c;此时我们需要删除重复数据&#xff0c;只保留其中一条有效的数据&#xff1b; 针对这种场景&#xff0c;我们用SQL语句该怎么实现呢&#xff1f; 数据准备 建表语句&#xff1a; DROP …

.ssh文件夹下缺失known_hosts文件

.ssh文件夹下缺失known_hosts文件 先确认工蜂或github 添加了git生成的密钥 然后 桌面打开git bash 1、执行ssh -T gitgitlab.com 2、输入yes

kafka架构和原理详解

Apache Kafka 是一个分布式流数据平台,用于高吞吐量、持久性、可扩展的发布和订阅消息。它具有高度的可靠性,被广泛用于构建实时数据流处理、日志收集和数据管道等应用。 基本架构 1. 主题(Topic): 主题是消息的逻辑分类生产者将消息发布到特定的主题中,而消费者可以订阅…

ssm+vue海鲜自助餐厅系统源码和论文

ssmvue海鲜自助餐厅系统源码和论文068 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&…

基于PID优化和矢量控制装置的四旋翼无人机(MatlabSimulink实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

嬴图Ultipa | 一文了解关于图数据库的一点儿干货

本篇包括以下内容点&#xff1a; 数据库主要技术分类 图是什么&#xff1f; 图的模式 图数据库 VS.关系型数据库 图数据库VS.其他NOSQL的对比 并非所有的图数据库都一样&#xff01; 根据Gartner预测&#xff0c;“到2025年&#xff0c;使用图技术进行数据和分析创新…

C# 生成唯一ID

1.首先通过nuget安装yitter.idgenerator 下面的三行代码搞定

数据结构 day1

1>x.mind 2>间接定义结构体数组&#xff0c;进行4种方式的定义和初始化 3>定义结构体存储10辆车&#xff08;车的信息&#xff1a;品牌、单价、颜色&#xff09; 1.定义函数&#xff0c;实现循环输入 2.定义函数&#xff0c;实现排序 3.定义函数&#xff0c;计算红色车…

树莓派3b无屏幕登录

如果要无屏登录&#xff0c;烧写时最好设置&#xff0c;勾选WIFI &#xff0c;登录密码&#xff0c;和SSH 树莓派操作系统下载地址 树莓派资源下载 | 树莓派实验室 无屏幕无键盘登录&#xff1a;新版中可能要先SSH登录&#xff0c;然后才能在RASPI-CONFIG中打开串口控制台 登录…

【Axure原型分享】能统计中英文字数的多行输入框

今天和大家分享能统计中英文字数的多行输入框的原型模板&#xff0c;在输入框里输入内容后&#xff0c;能够动态根据输入框的内容&#xff0c;统计出字符数量&#xff0c;包括总字数、中文字数、英文字数、数字字数、其他标点符号的字数&#xff0c;具体效果可以观看下方视频或…