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

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

<template><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@row-click="rowClick" @selection-change="handleSelectionChange"><el-table-columntype="selection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="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>

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

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

相关文章

云原生应用(5)之Dockerfile精讲及新型容器镜像构建技术

一、容器与容器镜像之间的关系 说到Docker管理的容器不得不说容器镜像&#xff0c;主要因为容器镜像是容器模板&#xff0c;通过容器镜像我们才能快速创建容器。 如下图所示&#xff1a; Docker Daemon通过容器镜像创建容器。 二、容器镜像分类 操作系统类 CentOS Ubuntu 在…

深入理解element-plus table二次封装:从理论到实践的全面指南

前言 在许多中后台管理系统中&#xff0c;表格占据着半壁江山&#xff0c;如果使用element plus组件库&#xff0c;那么少不了要用到table组件&#xff0c;可是table组件的功能过于基础&#xff0c;因此&#xff0c;我在table组件的实现基础之上进一步封装&#xff0c;从而实现…

安卓工控一体机主板定制_联发科MTK平台解决方案

新移科技安卓工控一体机方案基于MT8766主芯片&#xff0c;采用四核 Cortex-A53 CPU&#xff0c;搭载Android 12.0系统&#xff0c;主频高达2.0GHz&#xff0c;具有低功耗和高性价比的优势。搭载ARM IMG GE8300 高性能GPU和4G全网通版本的RF&#xff0c;网络连接稳定快速。 可直…

vue 侦听器(二)

即时回调的侦听器 watch 默认是懒执行的&#xff1a;仅当数据源变化时&#xff0c;才会执行回调。但在某些场景中&#xff0c;我们希望在创建侦听器时&#xff0c;立即执行一遍回调。举例来说&#xff0c;我们想请求一些初始数据&#xff0c;然后在相关状态更改时重新请求数据…

【Node.js】图片验证码识别

现在越来越多的网站采取图片验证码&#xff0c;防止机器恶意向服务端发送请求。但是常规的图片验证码也不是非常安全了。有非常多第三方库可以对图片上的数字文字等进行识别。 代码实现 首先安装依赖&#xff1a; npm install node-native-ocrnpm&#xff1a;(node-native-oc…

经验分享:开源知识库才是企业低成本搭建的最佳选择!

身为企业所有者的你&#xff0c;是否为建设企业的知识库而头疼&#xff1f;想要一个功能全面而又简单易用的知识库&#xff0c;但又担心成本过高&#xff1f;那我今天要分享的内容&#xff0c;可能会给你带来一些启示。那便是&#xff1a;开源知识库便是你企业低成本搭建的最佳…

mysql null和空值的区别

null 也就是在字段中存储null值&#xff0c;空值也就是字段中存储空字符(‘’) 占用空间的区别 执行sql&#xff1a;mysql> select length(NULL), length(‘’), length(‘1’); 空值’是不占用空间的&#xff0c;而null的长度是null&#xff0c;其实是占用空间的。mysql…

单元测试(UT)用例简介

单元测试&#xff08;Unit Testing, UT&#xff09;用例是一系列预先设计好的、针对软件最小可测试单元的测试场景。每一个单元测试用例都是为了验证一个独立代码单元&#xff08;如函数、方法、类&#xff09;的行为是否符合预期。这些用例通常包含以下几个关键组成部分&#…

Tron波场区块链 | 使用Java将Tron钱包助记词转私钥 全网独门一份

如何使用Java将Tron钱包助记词转换为私钥? 本来想着这个问题挺简单&#xff0c;可是查了半天&#xff0c;不是&#xff0c;不止半天查了好长时间&#xff0c;看了半天官网文档&#xff0c;全网Java就没有实现的。 咋办。。。咋办呢&#xff1f; 好巧&#xff0c;官网我看到…

.Net Web窗口页属性

<%Page %> Page 指令定义 Web 窗体使用的属性&#xff0c;这些属性将被 Web 窗体页分析器和编译器使用。只能包含在 .aspx 文件中。我们每新建一个 Web 页面时&#xff0c;系统会自动为该 Web 页面头部创建一个 Page 指令&#xff0c;来指明页面最基本的属性。 Langu…

ARM-按键中断实验

代码 #include "stm32mp1xx_gic.h" #include "stm32mp1xx_exti.h" extern void printf(const char *fmt, ...); unsigned int i 0; void do_irq(void) {//获取要处理的中断的中断号unsigned int irqnoGICC->IAR&0x3ff;switch (irqno){case 99:pr…

C++奇迹之旅(三):缺省参数与函数重载

文章目录 &#x1f4dd;缺省参数分类&#x1f320; 缺省参数概念&#x1f309;缺省参数分类 &#x1f320;全缺省参数&#x1f309;半缺省参数 &#x1f320; 函数重载&#x1f309; 函数重载概念&#x1f320;参数类型不同&#x1f320;参数个数不同&#x1f320;参数类型顺序…

SpringWebFlux初步认识

反应式编程的认识 基础认识 命令式编程&#xff1a;后一行代码需要等待前一行代码执行完毕&#xff0c;也就是后面的执行任务步骤依赖于前面的执行任务。 反应式编程&#xff1a; 定义了一组如何处理数据的任务&#xff0c;这些任务是可以并行进行的&#xff0c;可以在处理数…

CQI-17:2021 V2 英文 、中文版。特殊过程:电子组装制造-锡焊系统评审标准

锡焊作为一个特殊的工艺过程&#xff0c;由于其材料特性的差异性、工艺参数的复杂性和过程控制的不确定性&#xff0c;长期以来一直视为汽车零部件制造业的薄弱环节&#xff0c;并将很大程度上直接导致整车产品质量的下降和召回风险的上升。 美国汽车工业行动集团AIAG的特别工…

C++蓝桥考级一级到十八级的考点内容整理

以下是C蓝桥考级一级到十八级的考点内容整理&#xff1a; C一级考点内容 C程序基本结构 初步了解C编程了解C程序基本结构&#xff1a;头文件、命名空间、主函数、基本输入输出 cin、cout C二级考点内容 数据类型与变量 掌握编程中数学表达式的计算方式基础数据类型、变量的…

2024年2月游戏手柄线上电商(京东天猫淘宝)综合热销排行榜

鲸参谋监测的线上电商&#xff08;京东天猫淘宝&#xff09;游戏手柄品牌销售数据已出炉&#xff01;2月游戏手柄销售数据呈现出强劲的增长势头。 根据鲸参谋数据显示&#xff0c;今年2月游戏手柄月销售量累计约43万件&#xff0c;同比去年上涨了78%&#xff1b;销售额累计达1…

武汉星起航:跨境电商获各大企业鼎力支持,共筑繁荣生态

随着全球化和数字化的深入发展&#xff0c;跨境电商行业逐渐成为连接国内外市场的重要桥梁。在这一进程中&#xff0c;各大企业纷纷加大对跨境电商行业的支持力度&#xff0c;通过投资、合作与创新&#xff0c;共同推动行业的繁荣与发展。武汉星起航将探讨各大企业对跨境电商行…

Linux安装python3

Linux安装python3 本文章中使用的安装包等相关文件&#xff1a; 链接: https://pan.baidu.com/s/1C4PTB6IqXtHM6XSOEMkefg 提取码: wyeq 1.编译环境安装 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gcc mak…

Linux 基于chrony进行时钟同步方案验证

Linux 基于chrony进行时钟同步方案验证 1. 背景介绍2. 验证过程2.1 追踪配置2.2 追平记录2.2 追平时间换算 3. 疑问和思考3.1 如何统计追踪1s需要花费多长时间&#xff1f; 4. 参考文档 chrony是一个Linux系统中用于时钟同步的工具。它使用NTP&#xff08;网络时间协议&#xf…

在 Linux 中通过 SSH 执行远程命令时,无法自动加载环境变量(已解决)

问题场景 目前我的环境变量都存储在 /etc/profile 文件中&#xff0c;当我通过远程 SSH 执行一些命令时&#xff0c;提示命令找不到&#xff0c;如下所示&#xff1a; 问题出现原因 这里找到了一张出自尚硅谷的图片&#xff0c;很好的解释了该问题&#xff1a; 这是由于 Linu…