当前位置: 首页 > news >正文

前端在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: 表格列组件&#xff0c;定义每列的展示内容和属性 --><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&#xff1a;else if range语句&#xff1a; continue continue的作用是&#xff1a; 中断所在循环的当次执行&#xff0c;直接进入下一次 continue在嵌套循环中的应用 break 直接结束所在的循环 break在嵌套循环中的应用 continue和break&#xff0c;在…...

【stm32】大一上学期笔记复制

砌墙单片机 外设是什么&#xff1f; ipage 8 nx轴 128 X0-127 y0-63 PWM脉冲宽度调制 PWM脉冲宽度调制 2023年10月13日 基本特性&#xff1a;脉冲宽度调制PWM是一种对模拟信号进行数字编码的方法。广泛引用于电机控制&#xff0c;灯光的亮度调节&#xff0c;功率控制等领域…...

LeetCode题练习与总结:二叉树的前序遍历--144

一、题目描述 给你二叉树的根节点 root &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&#xff1a;roo…...

如何优化Spring Boot应用的性能

如何优化Spring Boot应用的性能 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何通过优化技术和最佳实践来提升Spring Boot应用的性能&#x…...

人工智能--目标检测

欢迎来到 Papicatch的博客 文章目录 &#x1f349;引言 &#x1f349;概述 &#x1f348;目标检测的主要流程通常包括以下几个步骤 &#x1f34d;数据采集 &#x1f34d;数据预处理 &#x1f34d;特征提取 &#x1f34d;目标定位 &#x1f34d;目标分类 &#x1f348;…...

Java基础之List实现类

文章目录 一、基本介绍二、常见方法三、ArrayList注意事项四、ArrayList底层结构我的理解 五、ArrayList扩容机制无参构造器有参构造器 六、LinkedList介绍底层操作机制 七、ArrayList 与 LinkedListArrayListLinkedList tip&#xff1a;以下是正文部分 一、基本介绍 List集合…...

java List接口介绍

List 是 Java 集合框架中的一个接口,它继承自 Collection 接口,代表一个有序的元素集合。List 允许重复的元素,并且可以通过索引来访问元素。Java 提供了多种 List 的实现,如 ArrayList、LinkedList、Vector 和 CopyOnWriteArrayList。 List接口概述 List 接口提供了一些…...

调度器APScheduler定时执行任务

APScheduler&#xff08;Advanced Python Scheduler&#xff09;是一个Python库&#xff0c;用于调度任务&#xff0c;使其在预定的时间间隔或特定时间点执行。它支持多种调度方式&#xff0c;包括定时&#xff08;interval&#xff09;、日期&#xff08;date&#xff09;和Cr…...

git合并分支的疑问

今天遇到一个奇怪的问题&#xff1a; 1、后端从master拉了三个分支。分别为dev、test、和stage。 2、研发1从dev拉了分支feature1,然后commit、commit、commit……。最后request merge到dev、test和stage。成功了。 3、研发2从dev拉了分支feature2,注意&#xff0c;feature2…...

catia数控加工仿真Productlist无法添加部件或零件

这种情况是没有把NCSetup显示 在工具中勾选即可...

关于Pycharm右下角不显示解释器interpreter的问题解决

关于Pycharm右下角不显示解释器interpreter的问题 在安装新的Pycharm后&#xff0c;发现右下角的 interpreter 的选型消失了&#xff1a; 觉得还挺不习惯的&#xff0c;于是网上找解决办法&#xff0c;无果。 自己摸索了一番后&#xff0c;发现解决办法如下&#xff1a; 勾…...

为什么word生成的PDF内容显示不全?

在现代办公环境中&#xff0c;将文档从一个格式转换为另一个格式是一个常见的任务。然而&#xff0c;有时候我们可能会遇到意想不到的问题&#xff0c;比如使用Word转换成PDF时&#xff0c;生成的PDF文件只显示了整个界面的四分之一内容。这种问题不仅令人困扰&#xff0c;也可…...

JVM专题十三:总结与整理(持续更新)

图解JVM JVM与Java体系结构 JVM垃圾回收算法 JVM垃圾回收器 图解JVM主要是放了前面12个章节的我们给大家画的图&#xff0c;做了整体的汇总&#xff0c;大家可以根据图区回忆我们所说的内容&#xff0c;查缺补漏。 实战经验 1、项目中数据量多少&#xff0c;QPS与TPS最高多少…...

MobPush iOS端海外推送最佳实现

推送注册 在AppDelegate里进行SDK初始化&#xff08;也可以在Info.plist文件中进行AppKey&#xff0c;AppSecret的配置&#xff09;并对通知功能进行注册以及设置推送的环境和切换海外服务器等&#xff0c;参考如下步骤代码&#xff1a; <span style"background-colo…...

商家团购app微信小程序模板

手机微信商家团购小程序页面&#xff0c;商家订餐外卖小程序前端模板下载。包含&#xff1a;团购主页、购物车订餐页面、我的订单、个人主页等。 商家团购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 损失函…...

计算机视觉:深入了解图像分类、目标检测和图像分割的核心技术

计算机视觉是什么&#xff1f; 计算机视觉是一门致力于让计算机“看懂”图像和视频的技术&#xff0c;它旨在通过模拟人类视觉系统来理解和解释数字化视觉信息。这一领域涉及图像的获取、处理、分析和理解&#xff0c;最终用于从视觉数据中提取有用信息并做出决策。计算机视觉的…...

Django 安装 Zinnia 后出现故障

在Django中安装和配置Zinnia时遇到故障可能有多种原因&#xff0c;通常包括版本兼容性、依赖关系或配置问题。这里提供一些常见的解决方法和调试步骤&#xff0c;帮助大家解决问题。 首先&#xff0c;确保您安装的Zinnia版本与Django版本兼容。查看Zinnia的官方文档或GitHub页…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...