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;网络连接稳定快速。 可直…

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

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

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

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

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

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

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;参数类型顺序…

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

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

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…

Java数据结构-链表OJ题

目录 1. 移除链表元素2. 反转链表3. 返回中间结点4. 返回倒数第k个结点5. 合并两个有序链表6. 分割链表7. 回文链表8. 找相交链表的公共结点9. 判断链表是否有环10. 返回链表环的入口 老铁们好&#xff0c;学习完链表这个数据结构之后&#xff0c;怎么能少了OJ题呢&#xff1f;…

HTLM 之 vscode 插件推荐

文章目录 vscode 插件live Serverprettiersetting 保存这个文档的更改Material Theme / Material Theme icon vscode 插件 live Server prettier setting 搜索 format default 保存这个文档的更改 cmds // mac ctrls // win Material Theme / Material Theme icon 来更换…

【No.21】蓝桥杯组合数学|数位排序|加法计数原理|乘法计数原理|排列数|组合数|抽屉原理|小蓝吃糖果|二项式定理|杨辉三角|归并排序(C++)

组合数学 数位排序 【问题描述】 小蓝对一个数的数位之和很感兴趣,今天他要按照数位之和给数排序。当两个数各个数位之和不同时,将数位和较小的排在前面,当数位之和相等时,将数值小的排在前面。 例如,2022 排在 409 前面, 因为 2022 的数位之和是 6,小于 409 的数位 之和 13。…

数据结构:Trie(前缀树/字典树)

文章目录 一、介绍Trie1.1、Trie的结点结构1.2、Trie的整体结构 二、Trie的操作2.1、Trie插入操作2.2、Trie查找操作2.3、Trie前缀匹配操作2.4、Trie删除操作 三、实战3.1、实现Trie&#xff08;前缀树&#xff09; 一、介绍Trie Trie 又称字典树、前缀树和单词查找树&#xff…

C++11 shared_from_this学习

最近学习网络变成发现一些C源码库中封装对象时会公有继承enable_shared_from_this&#xff1b; 用一个案例进行说明&#xff0c;案例代码如下&#xff1a; #include <iostream> #include <memory> #include <stdio.h>using namespace std;class C : public…

RPC(Remote Procedure Call)远程过程调用

定义 RPC&#xff08;Remote Procedure Call&#xff09;即远程过程调用&#xff0c;是一种计算机通信协议&#xff0c;它允许程序在不同的计算机之间进行通信和交互&#xff0c;就像本地调用一样。 为什么需要 RPC&#xff1f; 回到 RPC 的概念&#xff0c;RPC 允许一个程序…