el-table 设置单击行时选中当前行的复选框并取消其他复选框的选择

第一步 :首先要在el-table上对ref属性进行定义,后续用来操作该table。

第二步:为表格绑定 @row-click="rowClick"事件。

el-table定义如下:

<template> 
 <el-table
      :data="tableData"
        ref="customTable"
         @row-click="rowClick"
      style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
</template>

第三步: 声明row-click事件函数rowClick。


  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      methods: {
		rowClick(row) {
            // 取消所有的选择状态
            this.$refs.persTable.clearSelection()
            //为选中的复选框设置选中状态
            this.$refs.persTable.toggleRowSelection(row)
        }
    }
  </script>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot的人才公寓管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

一个包含了超过 200 个实用脚本的 Python 脚本库,如文件管理、网络操作、图像处理、文本处理等

前言 在日常的工作和生活中&#xff0c;我们经常会遇到一些重复性的任务&#xff0c;如文件管理、网络cao作、图像处理、文本处理等。这些任务虽然简单&#xff0c;但如果频繁手动cao作&#xff0c;不仅耗时耗力&#xff0c;还容易出错。 现有的软件虽然能处理一部分问题&…

Vue2+Univer 环境搭建

node js 版本 16.32 参考文档&#xff1a; Vue2Univer实现可编辑Excel_vue univer-CSDN博客 https://univer.ai/guides/sheet/getting-started/quickstart 实现步骤&#xff1a; 1、包里面直接写这些 "riophae/vue-treeselect": "0.4.0","univ…

基于深度学习的图像修复系统设计与实现(PyQt5、CodeFormer ffhq-dataset数据集)

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

Matlab 车牌识别技术

1.1设计内容及要求&#xff1a; 课题研究的主要内容是对数码相机拍摄的车牌&#xff0c;进行基于数字图像处理技术的车牌定位技术和车牌字符分割技术的研究与开发&#xff0c;涉及到图像预处理、车牌定位、倾斜校正、字符分割等方面的知识,总流程图如图1-1所示。 图1-1系统总…

为什么自动化测试落地这么难?

最近一直在想一个问题&#xff0c;就是自动化测试落地为什么这么难&#xff1f; 想要找到原因首先我们要明确实施自动化测试的目的&#xff0c;价值&#xff0c;以及要解决的问题是什么&#xff1f;然后我们可以再进一步分析为什么自动化测试很难落地&#xff1f; 实施自动化…

数据采集与数据分析:数据时代的双轮驱动

“在当今这个数据驱动的时代&#xff0c;信息已成为企业决策、市场洞察、科学研究等领域不可或缺的核心资源。而爬虫数据采集与数据分析&#xff0c;作为数据处理链条上的两大关键环节&#xff0c;它们之间相辅相成&#xff0c;共同构成了数据价值挖掘的强大引擎。” 爬虫数据采…

【js逆向专题】12.RPC技术

目录 一. websocket1. 什么是websocket2. websocket的原理3. websocket实现方式1. 客户端2.服务端3. 实际案例1. 案例目标2. 解析思路 二. RPC1. RPC 简介2.Sekiro-RPC1. 使用方法1. 执行方式2.客户端环境3.使用参数说明 2. 测试使用1. 前端代码2. SK API3.python调用代码 三.项…

AR模型时序预测——预测未来(含完整代码)

一、前言 随着数据科学的快速发展&#xff0c;利用自回归&#xff08;AR&#xff09;模型进行时序预测已成为一个热门话题。AR模型因其简洁有效&#xff0c;广泛应用于各类预测任务。本文将介绍一套基于Matlab的AR模型时序预测代码&#xff0c;重点在于如何通过历史数据预测未…

工业相机详解及选型

工业相机相对于传统的民用相机而言&#xff0c;具有搞图像稳定性,传输能力和高抗干扰能力等&#xff0c;目前市面上的工业相机大多数是基于CCD&#xff08;Charge Coupled Device)或CMOS(Complementary Metal Oxide Semiconductor)芯片的相机。 一&#xff0c;工业相机的分类 …

爬虫+数据保存

爬虫以及数据保存 这篇文章, 分享如何将爬虫爬到的数据, 保存到excel表格当中。 文章目录 1.安装保存数据的第三方库openpyxl并使用 2.爬虫加单表数据保存 3.爬虫加多表数据保存 4.实战 一、安装保存数据的第三方库openpyxl并使用 我们需要安装openpyxl的第三方库 安装…

01 springboot-整合日志(logback-config.xml)

logback-config.xml 是一个用于配置 Logback 日志框架的 XML 文件&#xff0c;通常位于项目的 classpath 下的根目录或者 src/main/resources 目录下。 Logback 提供了丰富的配置选项&#xff0c;可以满足各种不同的日志需求。需要根据具体情况进行配置。 项目创建&#xff0…

打造充电场站:场地选择与合规运营详解

建设一座充电站需要六步流程&#xff1a;准备工作 → 备案 → 土地审核 → 规划审核 → 电力申请 → 验收确认 一、准备工作 在确定建设前&#xff0c;要考察待选的场地&#xff0c;例如空地、停车场等&#xff0c;与场地所有方签订充电站建设合作协议。根据场地和车流量等实际…

用docker Desktop 下载使用thingsboard/tb-gateway

1、因为正常的docker pull thingsboard/tb-gateway 国内不行了&#xff0c;所以需要其它工具来下载 2、在win下用powershell管理员下运行 docker search thingsboard/tb-gateway 可以访问到了 docker pull thingsboard/tb-gateway就可以下载了 3、docker Desktop就可以看到…

铲屎官进!双十一宠物空气净化器买哪款,有什么推荐的吗?

害&#xff0c;一到换毛季&#xff0c;真的顶不顺&#xff01;家里两只布偶疯狂掉毛&#xff0c;地板、衣服上这些常规的地方就不用说了&#xff0c;竟然连水杯旁也有浮毛的存在&#xff0c;被我不小心喝进去好几次&#xff0c;最严重的时候已经猫毛拌饭了。 我寻求了很多解决方…

jQuery:动画 节点

jQuery&#xff1a;动画 & 节点 定位获取位置滚动距离 动画显示隐藏淡入淡出展开收起动画队列自定义动画动画回调函数动画延迟 节点插入节点删除节点 定位 获取位置 jquery提供了两个方法&#xff0c;来获取元素所处的位置&#xff1a; // 取值 jQuery对象.offset() // …

【JVM】—深入理解ZGC回收器—背景概念回收流程

深入理解ZGC回收器—背景概念&回收流程 ⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star~&#x1f60a; 文章目录 深入…

采集QQ群成员的过程中遇到的问题

错误思路一&#xff1a;通过抓取windows的QQ软件来获取QQ成员 难点&#xff1a;通过spy获取不到节点和句柄 正确思路&#xff1a;通过抓取手机版本的QQ来获取QQ成员 用到的开发工具 开维控制精灵 按键精灵助手 查找节点 有自带的函数,比如cs控件类cs.id 能提取所有节点js…

基于KV260的基础视频链路通路(MIPI+Demosaic+VDMA)

目录 1. 简介 1.1 要点 1.2 背景 1.2.1 Got stuck 1.2.2 Cant be Initialized 2. Overlay 2.1 参考 Overlay 2.1.1 KV260 Base 2.1.2 Pynq-CV-OV5640 2.2 自建 Overlay 2.2.1 IIC IP 2.2.2 MIPI CSI-2 Rx 2.2.3 AXI4-S Subset 2.2.4 Demosaic 2.2.5 Pixel Pack …

非个人小程序注册材料及认证流程

一、注册材料 1、 电子邮箱A、 未被微信公众平台注册B、 未被微信开放平台注册C、 未被个人微信号绑定过&#xff0c;如果被绑定了需要解绑 或 使用其他邮箱&#xff08;如已被占用建议找回账号登录或换邮箱注册&#xff09;2、 管理员手机号码3、 管理员个人身份证&#xff08…