@change事件传参

news2024/9/20 13:43:12

@change事件传参

@change="(value)=>handleChange(value, item,index)"
这样可以接收index参数区分是哪一个组件事件,又可以接收子组件传的value值

<div class="boxItem" v-for="(item, index) in checkPeopleList" :key="index">
      <div class="boxItem-title">审核人员 {{ index + 1 }}</div>
      <div class="selectPeople">
        <el-select v-model="item.selectedValues" placeholder="选择审核人员" size="large" style="width: 240px">
          <template #empty="{}">
            <AreaTree @change="(value)=>handleChange(value, item,index)" />
          </template>
        </el-select>
        <!-- <el-cascader v-model="item.selectedValues" :options="options" :show-all-levels="false" /> -->
      </div>
      <!-- 新增删除按钮 -->
      <div class="delete-button-container">
        <el-button v-if="index !== 0" @click="removeCheckPeople(index)" type="danger" circle size="small"
          icon="Delete"></el-button>
      </div>

      <!-- 新增的容器 -->
      <div class="bottom-center-line-container">
        <el-button v-if="!item.hideAddButton" @click="addCheckPeople()" class="add-button" type="primary" circle
          size="small"><el-icon>
            <Plus color="#ffffff" size="" />
          </el-icon></el-button>
      </div>
    </div>

如果在模板中直接这样接收value参数,那么就value就拿不到
@change="handleChange(value, item,index)
在这里插入图片描述

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

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

相关文章

VUE实现TAB切换不同页面

VUE实现TAB切换不同页面 实现效果 资源准备 ReceiveOrderList, TodoListMulti, SignList 这三个页面就是需要切换的页面 首页代码 <template><div><el-tabs v-model"activeTab" type"card" tab-click"handleTabClick"><…

用于相位解包的卷积和空间四向 LSTM 联合网络

原文&#xff1a;A Joint Convolutional and Spatial Quad-Directional LSTM Network for Phase Unwrapping 作者&#xff1a;Malsha V. Perera 和 Ashwin De Silva 摘要&#xff1a; 相位展开是一个经典的病态问题&#xff0c;其目标是从包裹相位中恢复真实的相位。本文&…

鸿蒙(API 12 Beta2版)NDK开发【使用Node-API扩展能力接口】

简介 [扩展能力接口]进一步扩展了Node-API的功能&#xff0c;提供了一些额外的接口&#xff0c;用于在Node-API模块中与ArkTS进行更灵活的交互和定制&#xff0c;这些接口可以用于创建自定义ArkTS对象等场景。 Node-API接口开发流程参考[使用Node-API实现跨语言交互开发流程]…

非负数、0和正整数 限制最大值且保留两位小数在elementpuls表单中正则验证

一、结构 <el-form-item label"单价&#xff1a;" prop"price"><el-inputv-model.trim"formData.price"placeholder"请输入"blur"formMethod.fixTwo"><template #append>(元)</template></el-i…

基础算法:离散化(C++实现)

文章目录 1. 离散化的定义2. 离散化例题2.1 离散化二分2.2 离散化哈希表 1. 离散化的定义 离散化是一种在程序设计和算法优化中常用的技术&#xff0c;其核心思想是将无限空间中有限的个体映射到有限的空间中去&#xff0c;以此提高算法的时空效率。具体来说&#xff0c;离散化…

Docker 安装 GitLab教程

本章教程,主要介绍如何在Docker 中安装GitLab。 GitLab 是一个开源的 DevOps 平台,提供了一整套工具,用于软件开发生命周期的各个阶段,从代码管理到 CI/CD(持续集成和持续交付/部署),再到监控和安全分析。 一、拉取镜像 docker pull gitlab/gitlab-ce:latest二、创建 G…

【React】探讨className的正确使用方式

文章目录 一、className的正确用法二、常见错误解析三、实例解析四、错误分析与解决五、注意事项六、总结 在React开发中&#xff0c;正确使用className属性对组件进行样式设置至关重要。然而&#xff0c;由于JavaScript和JSX的特殊性&#xff0c;开发者常常会犯一些小错误&…

ShardingSphere实战(2)- 水平分表

上篇博客&#xff0c;我们讲了 ShardingSphere实战&#xff08;1&#xff09;- 分库分表基础知识&#xff0c;这篇博客&#xff0c;正式开始实操。 项目环境&#xff1a; JDK11 MySQL 8.0.30 Springboot 2.7.4 Mybatis ShardingSphere HikariCP 连接池 一、Maven 依赖 <…

filebeat发送日志

filebeat: 1.可以在本机收集日志 2.也可以远程收集日志 3.轻量级的日志收集系统&#xff0c;可以在非Java环境运行 logstash是在jvm环境中运行&#xff0c;资源消耗很高&#xff0c;启动一个logstash需要消耗500M左右的内存 filebeat只消耗10M左右的内存 test3是装有logstash的…

C语言的内存布局

根据 C 语言的内存布局规律&#xff0c;通常局部变量和全局变量哪一个的地址更小&#xff1f; 答&#xff1a;如图所示。 下面代码中&#xff0c;为何两个不同的变量可以存放在同一个地址上&#xff1f; #include <stdio.h> void func1(void); void func2(void); voi…

安装 qcloud-python-sts 失败 提示 gbk codecs decode byte 应该如何解决

安装 qcloud-python-sts 失败 提示 gbk codecs decode byte 应该如何解决 解决方案&#xff1a; 将windows 修改为utf-8编码格式 解决步骤如下&#xff1a; 1. 进入控制台 2. 点击区域 4. 点击管理 4.勾选UTF-8 5.重启系统即可

Java零基础之多线程篇:线程间如何通信?

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

计算机技术基础 (bat 批处理)Note6

计算机技术基础 &#xff08;bat 批处理&#xff09;Note6 本节主要讲解FOR命令语句&#xff08;循环&#xff09;在 bat 批处理中的使用 (part 2) 变量延迟 命令语句 在没有开启变量延迟的情况下&#xff0c;批处理命令行中的变量改变&#xff0c;必须到下一条命令才能体现…

C++ STL在算法题中的常用语法

Vector 1.将vector<int>中的元素全部置换为0 fill(vec.begin(), vec.end(), 0); 2.vector容器是可以直接用比较是否值等的&#xff01; Unordered_set 1. unordered_set的删除&#xff08;count的值也会减少&#xff09; 2.unordered_map中的int默认值是0&#xff0c;…

Prometheus-v2.45.0+Grafana+邮件告警

目录 普罗米修斯监控架构介绍 Prometheus 监控架构 1. 数据抓取&#xff08;Scraping&#xff09; 2. 时序数据库&#xff08;TSDB&#xff09; 3. 数据模型 4. PromQL 查询语言 5. 告警&#xff08;Alerting&#xff09; 6. Alertmanager 7. 可视化&#xff08;Visu…

从0开始搭建vue + flask 旅游景点数据分析系统( 六):搭建后端flask框架

这一期开始开发header部分&#xff0c;预期实现两个目标&#xff1a; 创建 Flask 项目导入旅游数据后端实现旅游数据的查询 1 python 环境 & 开发环境 python 安装和pycharm安装需要去网上找包&#xff0c;建议python使用3.8 或者3.9版本 2 新建项目 我们新建一个文件…

Kafka详解以及常见kafka基本操作

1、 kafka 是什么,有什么作用 Kafka是一个开源的高吞吐量的分布式消息中间件&#xff0c;对比于缓冲和削峰&#xff1a;上游数据时有突发流量&#xff0c;下游可能扛不住&#xff0c;或者下游没有足够多的机器来保证冗余&#xff0c;kafka在中间可以起到一个缓冲的作用&#x…

Qt项目——文本编辑器(Bug/疑问)

项目地址&#xff1a;GitHub - Outlier9/CatEditor: Cat文本编辑器--Qt 有帮助的话各位点点 star 啦&#xff0c;感谢&#xff01; 如果有需要学习该项目的人&#xff0c;觉得看文档较为困难&#xff0c;可以加我联系方式&#xff0c;给github点个star后可免费提供学习视频&…

红酒与烹饪:美食的灵感之源

在烹饪的广阔天地中&#xff0c;红酒常常作为一道神秘的佐料&#xff0c;为菜肴带来别样的风味与深度。当定制红酒洒派红酒&#xff08;Bold & Generous&#xff09;与烹饪艺术相遇&#xff0c;一场美食的灵感之旅便悄然展开。 一、红酒与烹饪的浪漫邂逅 在烹饪的世界里&…

12月长沙学术会议:EI检索,机器人、自动化与智能控制方向

在春意盎然、生机勃勃的四月&#xff0c;全球科技界的目光聚焦于中国长沙&#xff0c;这里即将迎来一场科技与智慧碰撞的盛宴——第四届机器人、自动化与智能控制国际会议&#xff08;ICRAIC 2024&#xff09;。本次盛会由历史悠久、文化底蕴深厚的湖南第一师范学院荣耀主办&am…