element-ui表格table中复选框只能选中一个

news2024/10/12 14:15:22

问题:

el-table中实现单选,选中一个其他的取消选中

代码:

<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="singleTable"
      highlight-current-row
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        name: '张三',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      selectedRow: null // 用于存储当前选中的行
    };
  },
  methods: {
   handleSelectionChange(selection) {
       if (Array.isArray(selection) && selection.length > 1) {//点击勾选框
        this.$refs.singleTable.toggleRowSelection(selection[0],false);
        this.$refs.singleTable.toggleRowSelection(selection[1],true);
        this.selectedRow = selection[1];
      }else if (Array.isArray(selection) && selection.length === 1){
        this.selectedRow = selection[0];
      }else {
        this.selectedRow = null;
      }
    },
  }
};
</script>```

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

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

相关文章

题目:1297. 子串的最大出现次数

> Problem: 1297. 子串的最大出现次数 题目&#xff1a;1297. 子串的最大出现次数 题目描述 给定一个字符串 s&#xff0c;要求找到满足以下条件的任意子串的出现次数&#xff0c;并返回该子串的最大出现次数&#xff1a; 子串中不同字母的数目必须小于等于 maxLetters。…

使用3080ti配置安装blip2

使用3080ti运行blip2的案例 本机环境&#xff08;大家主要看GPU&#xff0c;ubuntu版本和cuda版本即可&#xff09;&#xff1a;安装流程我最后安装的所有包的信息&#xff08;python 3.9 &#xff09;以供参考&#xff08;environment.yml&#xff09;&#xff1a; 本机环境&a…

Git:LF will be replaced by CRLF、pytest PermissionError以及Git应用中的一些问题解决及一些使用技巧

一、Git:LF will be replaced by CRLF和pytest: --cov NTERNALERROR PermissionError 1. git warning: LF will be replaced by CRLF in ***file 偶然git add在进行代码提交的时候碰到警告warning: LF will be replaced by CRLF in ***file&#xff0c;原因是编辑的代码内容中…

java抽象类和接口-cnblog

java抽象类和接口 1 抽象类 在解决实际问题时,一般将父类作为抽象类&#xff0c;子类继承父类&#xff0c;并且实例化对象 在一个类中&#xff0c;只要有有一个方法是抽象的&#xff0c;类就是抽象的 抽象类被继承后需要实现所有的抽象方法&#xff0c;抽象类的关键词是abst…

entity,pojo,vo,dto 详解

在Java项目中&#xff0c;包名通常用于组织代码&#xff0c;使其更加清晰和易于维护。entity、pojo、vo和dto是常见的包名&#xff0c;它们各自有不同的含义和用途。下面将详细解释这些包名的含义&#xff0c;并提供一个示例&#xff0c;帮助你更好地理解它们在项目中的应用。 …

第二届 龙信杯 电子数据取证竞赛部分Writeup

大佬文章&#xff1a; 龙信杯复现&#xff08;23、24&#xff09; | BthclsBlog 手机部分 资料&#xff1a;2024年第二届龙信杯 WP_2024龙信杯wp-CSDN博客 1.分析手机检材&#xff0c;请问此手机共通过adb连接过几个设备&#xff1f;[标准格式&#xff1a;3] 2 /data/a…

基于Java SpringBoot和Vue校园新闻论坛管理系统设计

摘要 本系统采用Java Spring Boot作为后端框架&#xff0c;前端使用Vue.js构建用户界面&#xff0c;旨在为校园新闻论坛提供一个高效、易用且功能全面的管理平台。通过整合SpringBoot的快速开发优势与Vue的响应式设计&#xff0c;实现了一个包含用户注册登录、新闻发布审核、评…

Rust编程的泛型

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust编程与项目实战_夏天又到了的博客-CSDN博客 7.6.1 什么是泛型编程 C/C、Rust都是强类型语言&#xff0c;在对数据进行处理时&a…

详解前端开发都需要掌握的十个 JavaScript 基本数组函数

假设你正在开发一个复杂的 Web 项目。你的数据来自许多 API&#xff0c;你的工作是高效地处理、过滤和分析这些数据。你的时间很紧张&#xff0c;所以每一行代码都很重要。 这时学习高级 JavaScript 数组方法就会对你有所帮助。 这些函数不仅可以减少代码量&#xff0c;还可以…

C语言—双链表

一、双向链表的结构 注意&#xff1a;这⾥的“带头”跟前⾯我们说的“头节点”是两个概念&#xff0c;实际前⾯在单链表阶段称呼不严谨&#xff0c;带头链表⾥的头节点&#xff0c;实际为“哨兵位”&#xff0c;哨兵位节点不存储任何有效元素&#xff0c;只是站在这⾥“放哨的”…

desmos和webgl绘制线条

目录 desmos绘制 webgl绘制 将线段坐标生成三角化坐标 处理斜接线段 处理圆角 尖角 先在desmos上面完成线条lineJoin绘制的,再将代码和公式转到js用webgl绘制. desmos绘制 示例 desmos计角斜接角时&#xff0c;需要用到的一些函数。在desmos定义成公共函数&#xff0c…

[含文档+PPT+源码等]精品基于springboot实现的原生Andriod心理健康辅导平台

基于Spring Boot实现的原生Android心理健康辅导平台&#xff0c;其背景可以从以下几个方面进行详细阐述&#xff1a; 一、技术背景 Spring Boot框架&#xff1a;Spring Boot是Spring框架的一个子集&#xff0c;它通过自动配置、简化依赖管理、内嵌容器等特性&#xff0c;极大…

登录前端笔记(一):pinia管理用户数据

一、把pinia加入到项目文件里 ①、npm install pinia ②mian.ts //①导入createPinia import { createPinia } from pinia //②执行方法得到实例 const pinia createPinia() //③把pinia实例加入到APP应用里 app.use(pinia)二、官网简单实例&#xff08;定义store【state与ac…

Stylized Far East 古代国风建筑城镇宫殿场景模型

古代国风建筑城镇宫殿场景模型。内容: -演示场景(截图) - 种类繁多的建筑,如宫殿、商店、神社、房屋、餐馆、宝塔、寺庙等 -带有塔楼、门楼的模块化城堡墙 -树木、岩石、悬崖和其他自然资产 -传统装饰,如纸灯笼、绘画、瓷器等 - 城镇道具,如手推车、栅栏、板条箱、市场、…

Redis-缓存一致性

缓存双写一致性 更新策略探讨 面试题 缓存设计要求 缓存分类&#xff1a; 只读缓存&#xff1a;&#xff08;脚本批量写入&#xff0c;canal 等&#xff09;读写缓存 同步直写&#xff1a;vip数据等即时数据异步缓写&#xff1a;允许延时&#xff08;仓库&#xff0c;物流&a…

el-carousel-item自动重复渲染,使用nanoid让重复的元素包含不同的id

<template><div class"page-container"><div class"m-title">轮播图</div><el-carousel height"400px" :autoplay"true"><el-carousel-item v-for"(item, index) in carouselList" :key&…

AOT漫谈专题(第二篇): 如何对C# AOT轻量级APM监控

一&#xff1a;背景 1. 讲故事 上一篇我们聊到了如何调试.NET Native AOT 程序&#xff0c;这是研究一个未知领域知识的入口&#xff0c;这篇我们再来看下如何对 Native AOT 程序进行轻量级的APM监控&#xff0c;当然这里的轻量级更多的是对 AOT 中的coreclr内容的挖掘。 二…

面试官最喜欢问的28道ZooKeeper面试题

前言 ZooKeeper 是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能包括&#xff1a;配置维护、域名服务、分布式同步、组服务等。 ZooKeeper 的目标就是封装好复杂易出错的关键服务&#xff0c;…

再也不怕面试官问我几百亿ip相关的问题了

首先要明确这一类的问题都是海量那个数据类型的问题&#xff0c;对于海量数据我们一般采用分而治之的思路去解决&#xff0c;考官考察的就是你有没有处理海量数据的经验。总结几个常见的海量数据相关的面试&#xff0c;供参考。 有一个存放10GB的ip地址文件&#xff0c;每行一…

2024年【安全生产监管人员】免费试题及安全生产监管人员模拟试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年安全生产监管人员免费试题为正在备考安全生产监管人员操作证的学员准备的理论考试专题&#xff0c;每个月更新的安全生产监管人员模拟试题祝您顺利通过安全生产监管人员考试。 1、【单选题】()以上地方人民政府…