el-table表格的一些操作-表格实现单选、多选

表格实现多选

<el-table:data="dataList"border@selection-change="handleSelectionChange">//多选框<el-table-column type="selection" width="55" align="center" /></el-table>

handleSelectionChange(val) {console.log(val);},

参数说明:

        dataList:表格渲染的数据

        handleSelectionChange:获取所有选中行的数据方法

表格实现单选

<el-table :data="dataList" border><el-table-column width="50px" label="选择" align="center"><template scope="scope"><el-radio:label="scope.row.id"v-model="radio"@change.native="handleSelectionChange(scope.$index, scope.row)">{{ "" }}</el-radio></template></el-table-column>
</el-table>
handleSelectionChange(index,row){console.log(row);console.log(index);
}

①绑定使用唯一值id进行绑定数据,保证数据唯一性。

(不然好多行被选中)

②因为label的显示原因,会默认将数据id显示出来。

el-radio标签里必须写{{ "" }}或{{}},否则单选按钮后面会出现scope.row.id

③change.native方法:

.native 官网解释:

 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。

④data里面radio设置初始值"",若哪一行想默认选中,radio设置初始值为该行的id

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

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

相关文章

浅谈兼容性测试的关键步骤

兼容性测试是确保应用程序在多样化的技术环境中正常运行的关键步骤。它有助于提高用户满意度&#xff0c;扩大市场覆盖范围&#xff0c;同时确保法规合规性。通过正确执行兼容性测试&#xff0c;企业可以确保其应用程序在各种平台上提供一致的卓越用户体验&#xff0c;从而增强…

#电子电器架构 —— 车载网关初入门

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 PS:小细节,本文字数7000+,详细描述了网关在车载框架中的具体性能设置。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 没有人关注你。也无需有人关注你。你必须承认自己的价值,你不能站在他…

现在游戏出海有多少优势?

国内游戏市场趋于饱和&#xff0c;但是国外市场潜力仍然可观&#xff0c;因此很多人选择游戏出海&#xff0c;那么现在游戏出海有多少优势呢&#xff1f; 1、市场潜力 全球游戏市场潜力巨大&#xff0c;增长迅速。中国游戏公司具有强大的研发能力和创新能力&#xff0c;能够开…

在edge浏览器中安装好了burp的ca证书,浏览器依旧不能访问https的原因

在edge浏览器中安装好了burp的ca证书&#xff0c;浏览器依旧不能访问https的原因 1.SwitchyOmega代理插件设置2.CA证书方法1方法2 1.SwitchyOmega代理插件设置 严格安装以下图片执行&#xff0c;不可少写或多写 2.CA证书 方法1 下载好证书&#xff0c;先导入到edge浏览器的中…

人工智能和机器学习:走向智能未来的关键

人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;是当今IT领域中最令人振奋的发展方向之一。从自动驾驶汽车到智能助手&#xff0c;AI技术的应用正在不断扩展&#xff0c;重新定义着我们的生活方式和商业模式。在这个文章中&#xff0c;我们将深入探讨…

Qt 案例 使用QNetworkReply或者URLDownloadToFile 下载http、https资源到本地路径

Qt 使用QNetworkReply或者URLDownloadToFile两种不同方式下载http、https链接资源文件&#xff0c;并且获取下载进度。 目录 一、 使用 URLDownloadToFile 下载二、 使用 QNetworkReply 下载三、 打包好的可执行程序示例下载四、 会员或订阅专栏下载源码 一、 使用 URLDownload…

感谢我的岗位

我很高兴能够分享我干了一年嵌入式软件工程师岗位的经验。作为一名嵌入式软件工程师&#xff0c;我在这一年中积累了很多经验和技能&#xff0c;也遇到了许多挑战。在这篇文章中&#xff0c;我将分享我的经验&#xff0c;并探讨我从这个过程中学到的东西。 首先&#xff0c;我…

改变分辨率的android程序思路

在Android应用程序中&#xff0c;开发一个能够改变分辨率的功能涉及到以下几个主要步骤&#xff1a; 获取当前设备的分辨率&#xff1a;使用Android提供的DisplayMetrics类可以获取到当前设备的屏幕分辨率信息&#xff0c;包括宽度和高度。 计算新的目标分辨率&#xff1a;根据…

pv操作题目笔记

对于 pv 操作分以下几步走 什么是pv操作 PV操作在进程同步中通常指的是信号量&#xff08;Semaphore&#xff09;操作。信号量是一种用于控制多个并发进程或线程之间的同步和互斥访问的同步工具。PV操作通常涉及两个基本操作&#xff1a;P操作&#xff08;wait操作&#xff0…

hdlbits系列verilog解答(向量门操作)-14

文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 构建一个具有两个 3 位输入的电路&#xff0c;用于计算两个向量的按位 OR、两个向量的逻辑 OR 以及两个向量的逆 &#xff08;NOT&#xff09;。将b反相输出到out_not上半部分&#xff0c;将a 的反相输出到out…

git pull 和 git fetch 有什么区别?

一、是什么 先回顾两个命令的定义 git fetch 命令用于从另一个存储库下载对象和引用git pull 命令用于从另一个存储库或本地分支获取并集成(整合) 再来看一次git的工作流程图&#xff0c;如下所示&#xff1a; 可以看到&#xff0c;git fetch是将远程主机的最新内容拉到本地…

【LeetCode】2562. 找出数组的串联值

难度&#xff1a;简单 题目 给你一个下标从 0 开始的整数数组 nums 。 现定义两个数字的 串联 是由这两个数值串联起来形成的新数字。 例如&#xff0c;15 和 49 的串联是 1549 。 nums 的 串联值 最初等于 0 。执行下述操作直到 nums 变为空&#xff1a; 如果 nums 中存…

K8S集群实践之九: Ceph

Rook is an open source cloud-native storage orchestrator, providing the platform, framework, and support for Ceph storage to natively integrate with cloud-native environments.1. 说明 因香橙派和树莓派资源所限&#xff0c;转移到基于VirtualBox建立的VMs继续实践…

Java实现添加文字水印、图片水印

目录 前言 一、获取原图片对象信息 1、读取本地图片 2、读取网络图片 二、处理水印 三、添加水印 四、获取目标图片 五、完整工具类 六、结果展示 前言 现在很多人都喜欢在各种平台上分享自己的照片吧&#xff0c;不管是一些制作出来的媒体图片还是精致的人像图片&…

【vue+nestjs】qq第三方授权登录【超详细】

项目场景&#xff1a; 前端使用vue3ts 后端使用nestjs 1.申请appId,appKey 1.进入qq互联官网。创建应用 特别注意 1.在填写网站回调域时,需要你线上真实能访问的。不然审核不通过。我的回调地址是前端路由地址 2.如果你想本地调试&#xff0c;回调到你的线上地址。你可以在本…

Vue3 + TypeScript

Vue3 TS开发环境创建 1. 创建环境 vite除了支持基础阶段的纯TS环境之外&#xff0c;还支持 Vue TS开发环境的快速创建, 命令如下&#xff1a; $ npm create vitelatest vue-ts-pro -- --template vue-ts 说明&#xff1a; npm create vitelatest 基于最新版本的vite进行…

数聚携手永达汽车集团强势入选爱分析《商业智能实践案例》

近日&#xff0c;国内知名数字化市场研究咨询机构爱分析发布《2023爱分析商业智能最佳实践案例》&#xff0c;此评选活动面向落地商业智能的各行企业和商业智能厂商&#xff0c;以第三方专业视角深入调研&#xff0c;评选出具有参考价值的创新案例。永达汽车集团与数聚股份合作…

Android 各版本及API对照表

Android版本EnLinux KernelAPI Level14UpsideDownCake6.1.233413Tiramisu5.15.413312LSv25. 10.663212S5.4,5.103111R4.14-stable,4.19-stable3010Q4.9-q,4.14-q,4.19-q299Pie4.4.107, 4.9.84, and 4.14.42288.1Oreo4.10278.0Oreo4.10267.1.1Nougat4.4.1257.0Nougat4.4.1246.0M…

解救Kubernetes混乱:Descheduler快速实现资源平衡

By default, Kubernetes doesn’t recompute and rebalance workloads. You could have a cluster with fewer overutilized nodes and others with a handful of pods How can you fix this? 关注【云原生百宝箱】公众号&#xff0c;快速掌握云原生 默认情况下&#xff0c;Ku…

Pyside6 QFileDialog

Pyside6 QFileDialog Pyside6 QFileDialog常用函数getOpenFileNamegetOpenFileNamesgetExistingDirectorygetSaveFileName 程序界面程序主程序 Pyside6 QFileDialog提供了一个允许用户选择文件或目录的对话框。关于QFileDialog的使用可以参考下面的文档 https://doc.qt.io/qtfo…