ElementUI表格table组件实现单选及禁用默认选中效果

在使用ElementUI,需要ElementUI表格table组件实现单选及禁用默认选中效果,
先看下效果图:
在这里插入图片描述
代码如下:

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @row-click="rowClick" @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  
</template>

<script>
  export default {
    data() {
      return {
	    selected:'',//选中的名字
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },

    methods: {
      //点击行
	 rowClick(row, column, event)
	 {
	     this.$refs.multipleTable.toggleRowSelection(row);
	 },
	 //改变时
	 handleSelectionChange(val)
	 {
	     if (val.length > 1)
	     {
	         this.$refs.multipleTable.clearSelection()
	         this.$refs.multipleTable.toggleRowSelection(val.pop())
	         console.log("handleSelectionChange1:",val)
	     }
	     else
	     {
	         if(val.length==1)
	         this.selected = val[0].name
	     }
	     if(val.length==0)
         this.selected = '';
	 }
 
    }
  }
</script>

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

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

相关文章

2024 ccfcsp认证打卡 2022 03 02 出行计划

import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt(); // 出行计划数目int m sc.nextInt(); // 查询个数int k sc.nextInt(); // 等待核酸检测结果所需时间final int N 200010;i…

ROS 2边学边练(4)-- 何为主题(topics)

概念 主题是一种节点间的通信方式&#xff0c;某个节点充当发布特定&#xff08;主题&#xff09;消息&#xff08;数据&#xff09;的角色&#xff0c;另外一些节点则可以订阅接收该特定&#xff08;主题&#xff09;消息&#xff08;数据&#xff09;。两者&#xff0…

Centos JDK1.8 下载安装

https://www.oracle.com/java/technologies/javase/javase8u211-later-archive-downloads.html 一 RPM包安装 rpm -ivh jdk-8u391-linux-x64.rpm /etc/profile export JAVA_HOME/usr/java/jdk1.8.0-x64 export PATH$JAVA_HOME/bin:$PATHsource /etc/profile二 tar.gz 包手动…

如何在极狐GitLab 配置 邮件功能

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了在极狐GitLab 用户…

封装性练习

练习 1 &#xff1a; 创建程序&#xff1a;在其中定义两个类&#xff1a; Person 和 PersonTest 类。定义如下&#xff1a; 用 setAge() 设置人的合法年龄 (0~130) &#xff0c;用 getAge() 返回人的年龄。在 PersonTest 类中实例化 Person 类的对象 b &#xff0c;调用 set…

基于Web的社区医院管理服务系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读100套最新项目持续更新中..... 2024年计算机毕业论文&#xff08;设计&#xff09;学生选题参考合集推荐收藏&#xff08;包含Springboot、jsp、ssmvue等技术项目合集&#xff09; 1. 系统功能…

模型 可编程思想

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_总纲目录。一切皆有可能。 1 可编程思想的应用 1.1 自动化智能投资顾问服务 传统的财富管理服务通常需要专业的财务顾问来为客户提供投资建议和资产管理服务。随着技术的发展&#xff0c;越来越多的投资者开始寻求…

【群晖】白群晖如何公网访问

【群晖】白群晖如何公网访问 ——> 点击查看原文 在使用默认配置搭建好的群晖NAS后&#xff0c;我们可以通过内网访问所有的服务。但是&#xff0c;当我们出差或者不在家的时候也想要使用应该怎么办呢&#xff1f; 目前白群提供了两种比较快捷的方式&#xff0c;一种是直接注…

广发期货:从灾备中心、信创云到主中心,超融合支撑云化与国产化双转型

案例亮点 超过 30 节点承载灾备中心、信创云及主中心的 60% 以上业务系统。超融合信创资源池稳定运行超 1 年&#xff0c;承载 80% 以上的信创系统&#xff0c;顺利通过信创验收。引入超融合架构后&#xff0c;业务在 1 周内快速上线&#xff0c;稳定运行 3 年&#xff1b;减少…

【MySql数据库】MySQL5.7在navicat中建立连接报错1045及重装MySQL过程中3306端口号被占用释放的过程

文章目录 一、报错1、软件中报错2、navicat中报错3、数据库密码是正确的4、卸载数据库5、重装数据库发现3306端口被占用 二、释放3306端口1、找到3306端口对应的PID值2、释放3306端口号3、释放端口后&#xff0c;重装数据库 一、报错 1、软件中报错 2、navicat中报错 在navic…

HTTP常见状态码

1xx 该类状态码属于提示信息&#xff0c;协议处理的中间状态&#xff0c;实际用到的比较少 2xx 该类状态码表示服务器成功处理了客户单的请求 200 OK 表示服务器成功处理了客户端的请求&#xff0c;一切正常 204 no content 表示服务器返回的内容里没有body 206 partial co…

北京小蓝蜂科技有限公司 基本情况

北京小蓝蜂科技有限公司 基本情况 公司概述 北京小蓝蜂科技有限公司(简称“小蓝蜂”)是一家专注于互联网行业的公司,成立于4年前,位于北京市海淀区成府路45号中关村智造大街G座一层J030。小蓝蜂主要业务包括技术开发、技术咨询、技术转让、技术推广等,同时也涉及销售自行…

【Go】六、函数

文章目录 1、函数的定义2、内存分析3、注意点4、函数数据类型5、自定义数据类型&#xff08;起别名&#xff09;6、支持对返回值命名 1、函数的定义 语法&#xff1a; func 函数名&#xff08;形参列表)&#xff08;返回值类型列表&#xff09;{执行语句..return 返回值列…

Android 12.0 mtp模式下连接pc后显示的文件夹禁止删除copy重命名功能实现

1.前言 在12.0的系统rom定制化开发中,usb连接pc端的时候有好几种模式,在做otg连接pc端的时候,改成mtp模式的时候,在pc端可以看到产品设备 的显示的文件夹的内容,对于产品设备里面的文件在pc端禁止做删除重命名拷贝等操作功能的实现 2.mtp模式下连接pc后显示的文件夹禁止删…

《HelloGitHub》第 96 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 https://github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 …

Ubuntu系统设置静态固定IP保姆级教程

1、查看网络接口信息 ifconfig 首先需要确认要设置固定IP的网络接口。在大多数情况下&#xff0c;这通常是ens33 2、查看路由网关信息 route -n # 查看打印 路由表 网关地址 3、备份文件 为了防止防止出现意外问题。Ubuntu中的网络配置文件通常存储在/etc/netplan/目录下&…

Linux内核之debugfs_create_dir与debugfs_create_file实例与调用栈流程(三十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

康耐视visionpro-CogDistancePointLineTool工具详细说明

CogDistancePointLineTool功能说明: 测量点到线的距离 备注&#xff1a;在“Geometry-Measurement”选项中的所有工具都是测量尺寸或角度工具&#xff0c;包括测量线与线 的角度、点与线的距离、圆与圆的距离等测量工具&#xff0c;工具使用的方法相似。 ①.打开工具栏&#…

正大国际:期货入门的基础知识是什么?

期货的概念很简单&#xff0c;就是一种远期合同&#xff0c;买卖双方约定交易物、交易价格与交易时间。难就难在如何理解它具备的杠杆率&#xff0c;人们是如何在这上面暴富或破产的 很多人抱有这么个错觉&#xff0c;觉得期货是一个小众市场。但其实&#xff0c;世界上所发生…

【服务端】node.js详细的配置

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…