前端在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页…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
