前端在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。

以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

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

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

相关文章

8种数据迁移工具

前言 最近有些小伙伴问我&#xff0c;ETL数据迁移工具该用哪些。 ETL(是Extract-Transform-Load的缩写&#xff0c;即数据抽取、转换、装载的过程)&#xff0c;对于企业应用来说&#xff0c;我们经常会遇到各种数据的处理、转换、迁移的场景。 今天特地给大家汇总了一些目前…

【云原生】服务网格(Istio)如何简化微服务通信

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、微服务架构的兴起 2、Istio&#xff1a;服务网格的佼…

服务器测评

服务器测评 Linux测评口令是否存在空口令账户密码长度和密码定期更换密码复杂度本地登录失败处理功能相关参数超时锁定sshd服务相关端口是否已经打开不允许root账户远程登录查看SELinux状态审计查看Linux中正在运行的服务查看已添加的iptables规则查看文件和目录的权限设置是否…

大文件上传是怎么做的

1. 分片上传 1. 把需要上传的文件按照一定的规则&#xff0c;分割成相同大小的数据块 2. 初始化一个分片上传任务&#xff0c;返回本次分片上传的唯一标识 3. 按照一定的规则把各个数据块上传 4. 发送完成后&#xff0c;服务端会判断数据上传的完整性&#xff0c;如果完整&a…

【Python】Python环境搭建教学#保姆级教学#手把手带你安装——内附Python环境搭建安装包(Python、PyCharm(社区版)安装包)

Python环境搭建 导读一、初识Python1.1 Python的由来1.2 Python的用途1.3 Python的优缺点1.4 Python的前景&#xff08;钱景&#xff09; 二、Python环境搭建2.1 运行环境——Python安装2.2 开发环境——PyCharm安装2.3 项目创建2.4 基本配置2.4.1 主题配置2.4.2 背景图设置2.4…

Vue笔记-vue中使用JS创建的函数

主要是公司对前端要求不高&#xff0c;能解决问题就行了&#xff0c;前端不太熟&#xff0c;用js这种处理起来方便&#xff0c;在此记录下。 在src中创建一个api目录&#xff0c;新建custom.js export const getDivHeightByClass (className) > {let divElements docume…

容器之docker

Docker 是一个开源的平台&#xff0c;旨在使应用程序的开发、部署和运行更加轻松。它利用容器技术&#xff0c;将应用程序及其依赖环境打包在一起&#xff0c;以便于在任何环境中一致运行。 概述 Docker 通过提供轻量级的虚拟化解决方案&#xff0c;使得开发者可以轻松创建、…

.NET 调用API创建系统服务实现权限维持

01阅读须知 此文所节选自小报童《.NET 内网实战攻防》专栏&#xff0c;主要内容有.NET在各个内网渗透阶段与Windows系统交互的方式和技巧&#xff0c;对内网和后渗透感兴趣的朋友们可以订阅该电子报刊&#xff0c;解锁更多的报刊内容。 02基本介绍 本文内容部分节选自小报童…

达梦数据库的DBMS_STATS包

达梦数据库的DBMS_STATS包 基础信息 OS版本&#xff1a; Red Hat Enterprise Linux Server release 7.9 (Maipo) DB版本&#xff1a; DM Database Server 64 V8 DB Version: 0x7000c 03134284132-20240115-215128-20081达梦数据库&#xff08;DM Database&#xff09;提供了 D…

FreeRTOS开发五、任务状态切换以及空闲任务回收结束的任务

1、任务状态切换 任务创建的时候就会处于就绪状态ready&#xff0c;然后他马上就能够运行进入Running状态&#xff0c;运行中可以调用vTaskDelay进入阻塞状态&#xff0c;实际就是延时一小段时间&#xff0c;等待唤醒&#xff0c;当延时时间过去后就回到了就绪状态&#xff0…

【python学习】自定义函数的一些高级用法-1

在 Python 中&#xff0c;自定义函数除了基本的定义和调用外&#xff0c;还有一些高级用法&#xff0c;可以让函数更加灵活和强大。以下是一些自定义函数的高级用法示例&#xff1a; 1. 默认参数 函数定义时可以指定默认参数值&#xff0c;当调用函数时没有提供该参数的值时&…

深入理解Spring Boot与Spring Cloud的整合方式

深入理解Spring Boot与Spring Cloud的整合方式 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨Spring Boot与Spring Cloud的整合方式&#x…

pytorch-ResNet18简单复现

目录 1. ResNet block2. ResNet18网络结构3. 完整代码3.1 网络代码3.2 训练代码 1. ResNet block ResNet block有两个convolution和一个short cut层&#xff0c;如下图&#xff1a; 代码&#xff1a; class ResBlk(nn.Module):def __init__(self, ch_in, ch_out, stride):su…

Java学习 (六) 面向对象--this、继承、方法重写、super

一、this 关键字 1、this 演示 vi Person.java public class Person {String name;int age;//显示声明构造器public Person(String s , int i){name s;age i;}public void setAge(int age){age age;}}vi PersonTest.java public class PersonTest {public static void m…

第二十一章 函数(Python)

文章目录 前言一、定义函数二、函数参数三、参数类型四、函数返回值五、函数类型1、无参数&#xff0c;无返回值2、无参数&#xff0c;有返回值3、有参数&#xff0c;无返回值4、有参数&#xff0c;有返回值 六、函数的嵌套七、全局变量和局部变量1、局部变量2、全局变量 前言 …

了解 .NET 中的会话管理

在 Web 开发领域&#xff0c;跨多个请求维护状态是一个关键方面。HTTP 的无状态特性要求开发人员实现持久保存用户数据的机制。这就是会话发挥作用的地方。在本文中&#xff0c;我们将探讨什么是会话、它们在 .NET 中的工作方式&#xff0c;并提供实际示例来说明它们的用法。 …

set_source_files_properties QT_QML_SINGLETON_TYPE

目录 前言 QT_QML_SINGLETON_TYPE 属性 基本用法 示例 1. 创建一个基本的 CMake 项目 2. 编辑 CMakeLists.txt 3. 创建 main.cpp 4. 创建 MySingleton.qml 5. 创建 qml.qrc 6. 创建 main.qml 构建和运行项目 结论 前言 在使用 Qt 和 CMake 构建项目时&#xff0c;…

weapp.socket.io.js

!function(t,e){if(“object"typeof exports&&"object"typeof module)module.exportse();else if("function"typeof define&&define.amd)define([],e);else{var re();for(var n in r)(“object"typeof exports?exports:t)[n]r[…

探索未知:sklearn处理未知类别数据的策略

探索未知&#xff1a;sklearn处理未知类别数据的策略 在机器学习项目中&#xff0c;我们经常遇到带有未知类别的数据&#xff0c;这些数据可能因为各种因素而缺失或无法归类。有效地处理这些未知类别对于构建鲁棒的模型至关重要。本文将深入探讨sklearn如何处理带有未知类别的…

解决Java中的NoRouteToHostException异常的方法

解决Java中的NoRouteToHostException异常的方法 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java开发中&#xff0c;网络编程是非常重要的一部分&#x…