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

news2024/11/24 13:54:28

在使用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>

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

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

相关文章

Linux根据时间删除文件或目录

《liunx根据时间删除文件》和 《Linux 根据时间删除文件或者目录》已经讲述了根据时间删除文件或目录的方法。 下面我做一些补充&#xff0c;讲述一个具体例子。以删除/home目录下的文件为例。 首先通过命令&#xff1a; ls -l --time-style"%Y-%m-%d %H:%M:%S"…

免费分享一套SpringBoot+Vue个人健康管理系统,帅呆了~~

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringBootVue个人健康管理系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringBootVue个人健康管理系统 Java毕业设计_哔哩哔哩_bilibili【免费】SpringBootVue个人健康管理系统 Java毕业设计项目来…

《亮数据:爬虫数据采集行业痛点的利器》

❤️作者主页&#xff1a;小虚竹 ❤️作者简介&#xff1a;大家好,我是小虚竹。2022年度博客之星评选TOP 10&#x1f3c6;&#xff0c;Java领域优质创作者&#x1f3c6;&#xff0c;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;掘金年度人气作…

[寿司力扣DP对于应用]712. 两个字符串的最小ASCII删除和【详细图解】

712. 两个字符串的最小 ASCII 删除和 LeetCode 原题链接 题目描述 给定两个字符串 s1 和 s2&#xff0c;返回 使两个字符串相等所需删除字符的ASCII 值的最小和 。 示例 1: 输入: s1 “sea”, s2 “eat” 输出: 231 解释: 在 “sea” 中删除 “s” 并将 “s” 的值(115)…

Unity3d使用Jenkins自动化打包(Windows)(一)

文章目录 前言一、安装JDK二、安装Jenkins三、Jenkins插件安装和使用基础操作 实战一基础操作 实战二 四、离线安装总结 前言 本篇旨在介绍基础的安装和操作流程&#xff0c;只需完成一次即可。后面的篇章将深入探讨如何利用Jenkins为Unity项目进行打包。 一、安装JDK 1、进入…

基于Java实现宠物领养救助交流平台设计和实现

基于Java实现宠物领养救助交流平台设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取源码联…

VsCode 中关闭烦人的ESLint(最简单的方法)

解决办法 1、直接禁用 2、项目中vue.config.js文件中lintOnSave改为false(关闭) module.exports {lintOnSave: false, }

用Blender给MetaHuman不同胖瘦身体模型做插值,计算过度模型

用Blender给MetaHuman不同胖瘦身体模型做插值&#xff0c;计算过度模型 本篇文章所有想法和代码均为ChatGPT所写 需求&#xff1a;MetaHuman的身体有瘦、标准、胖三个体型&#xff0c;想要通过三个体型插值计算出符合用户体型的更多模型 建议&#xff1a;chatGPT建议用Blender&…

在线构建自动部署软件JPOM

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 简而轻的低侵入式在…

Django安装及第一个项目

1、安装python C:\Users\leell>py --version Python 3.10.6 可以看出我的环境python的版本3.10.6&#xff0c;比较新 2、 Python 虚拟环境创建 2.1 官网教程 目前&#xff0c;有两种常用工具可用于创建 Python 虚拟环境&#xff1a; venv 在 Python 3.3 及更高版本中默…

【C语言】内存函数(memcpy)的使用和模拟实现

目录 一、memcpy定义1.memcpy在**cplusplus**中的定义2.memcpy**复制内存块**3.参数a.目的地b.源c.数字 4.函数返回值5.函数头文件 二、memcpy的使用使用memcpy()函数完成拷贝整型数组数据 三、memcpy的模拟实现思路代码 一、memcpy定义 1.memcpy在cplusplus中的定义 链接: l…

206基于matlab的无人机航迹规划(UAV track plannin)

基于matlab的无人机航迹规划(UAV track plannin&#xff09;。输入输出参数包括 横滚、俯仰、航向角&#xff08;单位&#xff1a;度&#xff09;&#xff1b;横滚速率、俯仰速率、航向角速率&#xff08;单位&#xff1a;度/秒&#xff09;&#xff1b;飞机运动速度——X右翼、…

八大技术趋势案例(虚拟现实增强现实)

科技巨变,未来已来,八大技术趋势引领数字化时代。信息技术的迅猛发展,深刻改变了我们的生活、工作和生产方式。人工智能、物联网、云计算、大数据、虚拟现实、增强现实、区块链、量子计算等新兴技术在各行各业得到广泛应用,为各个领域带来了新的活力和变革。 为了更好地了解…

法律合规:AI产品法律风险应对措施全解析(二)

在此前推文中我们全面分析了生成式人工智能算法模型可能遇到的法律风险&#xff1a; 1、隐私泄漏风险&#xff1a;企业需要遵守数据安全法和个人信息保护法的规定&#xff0c;确保数据来源合法&#xff0c;使用时获得用户授权&#xff0c;并对数据进行匿名化处理等。 2、偏见…

蓝桥杯刷题计划-洛谷-持续更新

P8598 [蓝桥杯 2013 省 AB] 错误票据 题目 #include <bits/stdc.h> #define endl \n #define int long long #define INF 0x3f3f3f3f3f const int N 1000010; using namespace std; int arr[N]; signed main() {int N;cin>>N;int idx;while(cin>>arr[idx…

金三银四面试题(一):JVM类加载与垃圾回收

面试过程中最经典的一题&#xff1a; 请你讲讲在JVM中类的加载过程以及垃圾回收&#xff1f; 加载过程 当Java虚拟机&#xff08;JVM&#xff09;启动时&#xff0c;它会通过类加载器&#xff08;ClassLoader&#xff09;加载Java类到内存中。类加载是Java程序运行的重要组成…

灰色预测模型以及matlab软件使用

1&#xff0c;灰色系统简介 著名学者邓聚龙教授于20世纪70年代末、80年代初提出&#xff1a; “ The诞生标志:邓教授第一篇灰色系统论文Control Problems of Grey Systems”&#xff0c;发表于北荷兰出版公司期刊 System & Control Letter,1982, No.5. 1.1 灰色系统&…

C语言数据输出和输入介绍

在C语言中&#xff0c;数据的输出和输入是程序与用户或外部环境进行交互的重要方式之一。通过数据的输出&#xff0c;程序可以向用户展示信息或结果&#xff1b;通过数据的输入&#xff0c;程序可以获取用户提供的数据或参数。本文将深入介绍C语言中数据输出和输入的相关知识&a…

定时器的原理和应用

#include<reg51.h> unsigned char s[]{0x3F,0x06,0x5B,0x4F,0x66,0x6D,0x7D,0x07,0x7F,0x6F}; unsigned char count0,num0; void inittimer() {TMOD0x01;//0000 0001TH0(65536-50000)/256; //定时50ms50000us 2562^8 初值向右边移动8位TL0(65536-50000)%256;ET01;//开启定…

Stable Diffusion WebUI 生成参数:脚本(Script)——提示词矩阵、从文本框或文件载入提示词、X/Y/Z图表

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 大家好,我是水滴~~ 在本篇文章中,我们将深入探讨 Stable Diffusion WebUI 的另一个引人注目的生成参数——脚本(Script)。我们将逐一细说提示词矩阵、从文本框或文件导入提示词,…