前端在for循环中使用Element-plus el-select中的@click.native动态传参
<el-table    ref="table" :data="editTableVariables" @cell-dblclick="handleRowDblClick" style="width: 100%"  
> <!-- el-table-column: 表格列组件,定义每列的展示内容和属性 --><el-table-column prop="name" label="名称" width="150"> <!-- template标签:定义列内的自定义内容 --><template #default="scope"> <span>{{scope.row.name}}</span> <!-- 显示当前行的name属性值 --></template> </el-table-column>  <el-table-column prop="dataType" label="数据类型" width="80"> <template #default="scope"> <span>{{scope.row.dataType}}</span> <!-- 显示当前行的dataType属性值 --></template> </el-table-column> <el-table-column prop="accessLevel" label="读写权限" width="140"> <template #default="scope"> <!-- el-select: 下拉选择框组件 --><el-select  v-model="tableSelectValue[scope.row.nodeId]"  placeholder="请选择" size="small" style="width: 120px" > <!-- el-option: 下拉选项组件 --><el-option v-for="(item, index) in accessLevel" :key="scope.row.nodeId" :label="item.value" :value="item.value" @click.native="changeTableSelect(item, index, scope.row.writeMask, scope.row.nodeId)" /> </el-select> </template> </el-table-column> <el-table-column prop="value" label="初值" width="100"> <template  #default="scope">  <!-- template标签定义列内的自定义内容 --><span>{{scope.row.value === null ? "<空>" : scope.row.value}}</span> <!-- 根据条件显示值或空 --></template> </el-table-column> <el-table-column prop="address" label="使能" width="120"> <template #default="scope"> <el-input v-model="scope.row.address" @change="handleEdit(scope.$index, scope.row)"></el-input> <!-- 输入框,绑定地址属性 --></template> </el-table-column> 
</el-table>
 
代码解释:
- : element-plus表格组件,用于展示数据。 
- ref=“table”: 为table设置引用,可以通过该引用获取table的实例。
 - :data=“editTableVariables”: 绑定表格的数据源为editTableVariables。
 - @cell-dblclick=“handleRowDblClick”: 监听表格的双击事件,触发handleRowDblClick方法。
 - style=“width: 100%”: 设置表格的宽度为100%。
 
 
表格列解释:
- el-table-column: 表格列组件,定义每列的展示内容和属性。 
- prop: 表示列对应数据源中的属性。
 - label: 列的标题名称。
 - width: 列的宽度。
 - template: 列内的自定义内容,使用#default="scope"来获取当前行的数据。
 
 
组件解释:
- el-select: element-plus下拉选择框组件,用于选择读写权限。 
- v-model=“tableSelectValue[scope.row.nodeId]”: 将下拉框的选中值与tableSelectValue对象中对应scope.row.nodeId属性进行双向绑定。
 - placeholder=“请选择”: 设置未选中时的提示文字。
 - size=“small”: 设置下拉框的尺寸为小号。
 - :key=“scope.row.nodeId”: 为循环中的每个选项设置唯一标识符。
 
 
方法介绍:
- handleEdit(index, row): 处理编辑操作的方法,传入索引和行数据。
 - changeTableSelect(item, index, writeMask, nodeId): 处理下拉选择框选中事件的方法,传入选项、索引、写权限和节点ID。
 
以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!
相关文章:
前端在for循环中使用Element-plus el-select中的@click.native动态传参
<el-table ref"table" :data"editTableVariables" cell-dblclick"handleRowDblClick" style"width: 100%" > <!-- el-table-column: 表格列组件,定义每列的展示内容和属性 --><el-table-column prop&q…...
Oracle SQL - CONNECT BY语句Where条件中不能使用OR?[已解决]
数据 SQL> SELECT * FROM demo_a;CUSTOMER TOTAL ---------- ---------- A 100200SQL> SELECT * FROM demo_b;CUSTOMER RN QTY ---------- ---------- ---------- A 1 30 A 2 …...
python-逻辑语句
if else语句 不同于C:else if range语句: continue continue的作用是: 中断所在循环的当次执行,直接进入下一次 continue在嵌套循环中的应用 break 直接结束所在的循环 break在嵌套循环中的应用 continue和break,在…...
【stm32】大一上学期笔记复制
砌墙单片机 外设是什么? ipage 8 nx轴 128 X0-127 y0-63 PWM脉冲宽度调制 PWM脉冲宽度调制 2023年10月13日 基本特性:脉冲宽度调制PWM是一种对模拟信号进行数字编码的方法。广泛引用于电机控制,灯光的亮度调节,功率控制等领域…...
LeetCode题练习与总结:二叉树的前序遍历--144
一、题目描述 给你二叉树的根节点 root ,返回它节点值的 前序 遍历。 示例 1: 输入:root [1,null,2,3] 输出:[1,2,3]示例 2: 输入:root [] 输出:[]示例 3: 输入:roo…...
如何优化Spring Boot应用的性能
如何优化Spring Boot应用的性能 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨如何通过优化技术和最佳实践来提升Spring Boot应用的性能&#x…...
人工智能--目标检测
欢迎来到 Papicatch的博客 文章目录 🍉引言 🍉概述 🍈目标检测的主要流程通常包括以下几个步骤 🍍数据采集 🍍数据预处理 🍍特征提取 🍍目标定位 🍍目标分类 🍈…...
Java基础之List实现类
文章目录 一、基本介绍二、常见方法三、ArrayList注意事项四、ArrayList底层结构我的理解 五、ArrayList扩容机制无参构造器有参构造器 六、LinkedList介绍底层操作机制 七、ArrayList 与 LinkedListArrayListLinkedList tip:以下是正文部分 一、基本介绍 List集合…...
java List接口介绍
List 是 Java 集合框架中的一个接口,它继承自 Collection 接口,代表一个有序的元素集合。List 允许重复的元素,并且可以通过索引来访问元素。Java 提供了多种 List 的实现,如 ArrayList、LinkedList、Vector 和 CopyOnWriteArrayList。 List接口概述 List 接口提供了一些…...
调度器APScheduler定时执行任务
APScheduler(Advanced Python Scheduler)是一个Python库,用于调度任务,使其在预定的时间间隔或特定时间点执行。它支持多种调度方式,包括定时(interval)、日期(date)和Cr…...
git合并分支的疑问
今天遇到一个奇怪的问题: 1、后端从master拉了三个分支。分别为dev、test、和stage。 2、研发1从dev拉了分支feature1,然后commit、commit、commit……。最后request merge到dev、test和stage。成功了。 3、研发2从dev拉了分支feature2,注意,feature2…...
catia数控加工仿真Productlist无法添加部件或零件
这种情况是没有把NCSetup显示 在工具中勾选即可...
关于Pycharm右下角不显示解释器interpreter的问题解决
关于Pycharm右下角不显示解释器interpreter的问题 在安装新的Pycharm后,发现右下角的 interpreter 的选型消失了: 觉得还挺不习惯的,于是网上找解决办法,无果。 自己摸索了一番后,发现解决办法如下: 勾…...
为什么word生成的PDF内容显示不全?
在现代办公环境中,将文档从一个格式转换为另一个格式是一个常见的任务。然而,有时候我们可能会遇到意想不到的问题,比如使用Word转换成PDF时,生成的PDF文件只显示了整个界面的四分之一内容。这种问题不仅令人困扰,也可…...
JVM专题十三:总结与整理(持续更新)
图解JVM JVM与Java体系结构 JVM垃圾回收算法 JVM垃圾回收器 图解JVM主要是放了前面12个章节的我们给大家画的图,做了整体的汇总,大家可以根据图区回忆我们所说的内容,查缺补漏。 实战经验 1、项目中数据量多少,QPS与TPS最高多少…...
MobPush iOS端海外推送最佳实现
推送注册 在AppDelegate里进行SDK初始化(也可以在Info.plist文件中进行AppKey,AppSecret的配置)并对通知功能进行注册以及设置推送的环境和切换海外服务器等,参考如下步骤代码: <span style"background-colo…...
商家团购app微信小程序模板
手机微信商家团购小程序页面,商家订餐外卖小程序前端模板下载。包含:团购主页、购物车订餐页面、我的订单、个人主页等。 商家团购app微信小程序模板...
探索AudioLM:音频生成技术的未来
目录 2. AudioLM的基础理论 2.1. 音频生成的基本概念 2.2. 语言模型在音频生成中的应用 2.3. 深度学习在音频生成中的作用 3. AudioLM的架构与实现 3.1. AudioLM的基本架构 3.1.1 编码器 3.1.2 解码器 3.1.3 生成模块 3.2. 训练过程 3.2.1 数据预处理 3.2.2 损失函…...
计算机视觉:深入了解图像分类、目标检测和图像分割的核心技术
计算机视觉是什么? 计算机视觉是一门致力于让计算机“看懂”图像和视频的技术,它旨在通过模拟人类视觉系统来理解和解释数字化视觉信息。这一领域涉及图像的获取、处理、分析和理解,最终用于从视觉数据中提取有用信息并做出决策。计算机视觉的…...
Django 安装 Zinnia 后出现故障
在Django中安装和配置Zinnia时遇到故障可能有多种原因,通常包括版本兼容性、依赖关系或配置问题。这里提供一些常见的解决方法和调试步骤,帮助大家解决问题。 首先,确保您安装的Zinnia版本与Django版本兼容。查看Zinnia的官方文档或GitHub页…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹,并新增内容 3.创建package文件夹...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解,适合用作学习或写简历项目背景说明。 🧠 一、概念简介:Solidity 合约开发 Solidity 是一种专门为 以太坊(Ethereum)平台编写智能合约的高级编…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
【Linux系统】Linux环境变量:系统配置的隐形指挥官
。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量:setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...
DiscuzX3.5发帖json api
参考文章:PHP实现独立Discuz站外发帖(直连操作数据库)_discuz 发帖api-CSDN博客 简单改造了一下,适配我自己的需求 有一个站点存在多个采集站,我想通过主站拿标题,采集站拿内容 使用到的sql如下 CREATE TABLE pre_forum_post_…...
SOC-ESP32S3部分:30-I2S音频-麦克风扬声器驱动
飞书文档https://x509p6c8to.feishu.cn/wiki/SKZzwIRH3i7lsckUOlzcuJsdnVf I2S简介 I2S(Inter-Integrated Circuit Sound)是一种用于传输数字音频数据的通信协议,广泛应用于音频设备中。 ESP32-S3 包含 2 个 I2S 外设,通过配置…...
华硕电脑,全新的超频方式,无需进入BIOS
想要追求更佳性能释放 或探索更多可玩性的小伙伴, 可能会需要为你的电脑超频。 但我们常用的不论是BIOS里的超频, 还是Armoury Crate奥创智控中心超频, 每次调节都要重启,有点麻烦。 TurboV Core 全新的超频方案来了 4不规…...
Springboot多数据源配置实践
Springboot多数据源配置实践 基本配置文件数据库配置Mapper包Model包Service包中业务代码Mapper XML文件在某些复杂的业务场景中,我们可能需要使用多个数据库来存储和管理不同类型的数据,而不是仅仅依赖于单一数据库。本技术文档将详细介绍如何在 Spring Boot 项目中进行多数…...
