【element ui系列】分享几种实现el-table表格单选的方法

在实际的开发中,经常会用到从表格中选择一条记录的情况,虽然官方给出的例子,但是给人感觉看起来不明显,于是,在此基础上做了改进。接下来,介绍两种常见的实现方法:

1、采用复选框(checkbox)实现,去掉表头多选框,代码如下:

<template>
  <div class="app-container">
    <el-table
      stripe 
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      class="section-table"
      @row-click="clickRow"
      @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>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '1',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '2',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '3',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '4',
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '5',
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '6',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '7',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        selectList: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.selectList = val;
        // 单选
        if (val.length > 1 ) {
            this.$refs.multipleTable.clearSelection();
            this.$refs.multipleTable.toggleRowSelection(val.pop());
        }
      },
      // 点击一行时选中
      clickRow(row){          
        // 单选选中行
        if (this.selectList[0] == row) {
          // 取消
          this.selectList = [];
          this.$refs.multipleTable.clearSelection();
        } else {
          // 选择
          this.selectList = [row];
          this.$refs.multipleTable.clearSelection();
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }           
        
      },

    }
  }
</script>
<style>
/*  将全选项隐藏 */
.section-table thead .el-table-column--selection .cell {
    display: none;
}

</style>

效果如图:

2、采用单选框(radio),双击取消选中

<template>
  <div class="app-container">
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row     
      @row-dblclick="rowClick2"
      @current-change="handleCurrentChange"
      style="width: 100%">
      <el-table-column width="35">
        <template slot-scope="scope">
          <el-radio
              class="radio"
              :label="scope.row"
              v-model="currentRow"             
            >{{""}}</el-radio>
        </template>
      </el-table-column>
      <el-table-column
        property="date"
        label="日期"
        width="120">
      </el-table-column>
      <el-table-column
        property="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        property="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '1',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '2',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '3',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '4',
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '5',
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '6',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '7',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        currentRow: null
      }
    },

    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(row) {
        this.currentRow = row;
      },
      rowClick2(row, column, event) {        
        if (this.currentRow && row.date == this.currentRow.date) { 
          this.setCurrent();
          this.currentRow = null;       
        } else {
          this.currentRow = row;
        }
      },

    }
  }
</script>
<style>

/*  将radio的label隐藏 */
.el-radio__label{
    display: none !important;
  }
</style>

效果如下图:

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

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

相关文章

nodejs批量修改word文档目录样式

工作中遇到一个需求:写个nodejs脚本,对word文档(1000+个)的目录页面进行美化。实现过程遇到不少麻烦,在此分享下。 整体思路 众所周知,Docx格式的Word文档其实是个以xml文件为主的zip压缩包,所以,页面美化整体思路是:先将文档后缀名改为zip并解压到本地,然后将关键的…

信息安全数学基础(40)同态

一、定义 设R和S是两个环&#xff08;或群等其他代数结构&#xff09;&#xff0c;如果存在一个映射σ&#xff1a;R→S&#xff0c;使得对于R中的任意元素a和b&#xff0c;都满足σ(ab)σ(a)σ(b)和σ(ab)σ(a)σ(b)&#xff08;在群的情况下&#xff0c;则满足σ(a*b)σ(a)σ…

【笔面试常见题:三门问题】用条件概率、全概率和贝叶斯推导

1. 问题介绍 三门问题&#xff0c;又叫蒙提霍尔问题&#xff08;Monty Hall problem&#xff09;&#xff0c;以下是蒙提霍尔问题的一个著名的叙述&#xff0c;来自Craig F. Whitaker于1990年寄给《展示杂志》&#xff08;Parade Magazine&#xff09;玛丽莲沃斯莎凡特&#x…

反向代购企业如何精准出击高需求国家——以俄罗斯市场为例

在全球化贸易的浪潮中&#xff0c;中国凭借其强大的工业生产能力、优越的地缘优势以及与俄罗斯日益紧密的双边关系&#xff0c;已成为俄罗斯不可或缺的贸易伙伴。中国制造的商品&#xff0c;从衣食住行到各类消费品&#xff0c;已深深渗透到俄罗斯民众的日常生活中。 据数据统计…

Muse-Ant-Desgin-Vue 改造成 Vite+Vue3

后台地址&#xff1a;https://www.creative-tim.com/product/muse-vue-ant-design-dashboard?refantdv-official 一、配置 ViteAntDesginVue 配置ViteAntDesginVue ViteAntDesginVue配置&#xff1a;https://blog.csdn.net/qq_17523181/article/details/143241626 安装vue-ro…

Proteus中单片机IO口外接LED输出低电平时,引脚却一直保持高电平的问题(已解决)

文章目录 前言解决方法后记 前言 一个排阻接八个 LED&#xff0c;方便又省事&#xff0c;但出现了P1端口输出低电平后&#xff0c;仿真引脚却一直显示红色保持高电平不变&#xff0c;用电压表测量显示 2V 左右。 这是仿真的问题&#xff0c;在用开发板时是不会遇到的&#xff…

DEVOPS: 认证与调度

概述 不知道大家有没有意识到一个现实&#xff0c;就是大部分时候&#xff0c;我们已经不像以前一样通过命令行&#xff0c;或者可视窗口来使用一个系统了现在我们上微博、或者网购&#xff0c;操作的其实不是眼前这台设备&#xff0c;而是一个又一个集群 通常&#xff0c;这样…

Altium Designer使用技巧(一)

一、清除绿色报错。 按TM快捷键。即可消除报错。 二、模块化框选集中。 在原理图中框选原理图&#xff0c;然后按 T S,会跳转到指定pcb&#xff0c;并选择上相应封装&#xff0c;此时按 T O L,再次画一个矩形&#xff0c;刚才选中的封装就会汇集到一起。 三、隐藏飞线 在PCB界面…

笔记本双系统win10+Ubuntu 20.04 无法调节亮度亲测解决

sudo add-apt-repository ppa:apandada1/brightness-controller sudo apt-get update sudo apt-get install brightness-controller-simple 安装好后找到一个太阳的图标&#xff0c;就是这个软件&#xff0c;打开后调整brightness&#xff0c;就可以调整亮度&#xff0c;可…

Unity XR Interaction Toolkit 开发教程(2):导入 SDK【3.0 以上版本】

文章目录 &#x1f4d5;课程总结&#x1f4d5;安装 Unity 编辑器与打包模块&#x1f4d5;导入 OpenXR&#x1f4d5;导入 XR Interaction Toolkit&#x1f4d5;打包发布 获取完整课程以及答疑&#xff0c;工程文件下载&#xff1a; https://www.spatialxr.tech/ 视频试看链接&a…

Python中的字符串“不可改变。/可以改变?”

Python中&#xff0c;规定字符串是“不可变”类型&#xff0c;字符串方法可以“重写”字符串。Python最终让您明白&#xff0c;“字符串不可改变”。&#x1f60e; (笔记模板由python脚本于2024年11月01日 17:55:57创建&#xff0c;本篇笔记适合熟悉python础数据类型str的coder…

5天学习RAG路线图,你信吗?

RAG是"Retrieval Augmented Generation"的缩写&#xff0c;让我们来拆解这个术语&#xff0c;了解RAG的本质&#xff1a; R -> Retrieval&#xff08;检索&#xff09; A -> Augmented&#xff08;增强&#xff09; G -> Generation&#xff08;生成&…

tkinter 走进现代化【一】 - 登录页

import customtkinter as ctk from PIL import Image, ImageTk from tkinter import messagebox import timeclass LoginApp(ctk.CTk):def __init__(self):super().__init__()self.title("登录页面")self.geometry("600x400")self.resizable(False, False)…

实时特征框架的生产实践|得物技术

一、业务背景 使用场景 推荐系统在当今的互联网应用中扮演着至关重要的角色&#xff0c;它极大地丰富了用户体验&#xff0c;帮助用户在海量信息中发现和探索他们可能感兴趣的内容。然而&#xff0c;随着数据量的激增和用户需求的日益多样化&#xff0c;传统的离线推荐系统已…

vue3+vant实现视频播放(含首次禁止进度条拖拽,视频看完后恢复,保存播放视频进度,刷新及下次进入继续播放,判断视频有无全部看完等)

1、效果图 2、 <div><videocontrolsclass"video_player"ref"videoPlayer":src"videoSrc"timeupdate"handleTimeUpdate"play"onPlay"pause"onPause"ended"onVideoEnded"></video><…

【设计模式系列】迭代器模式(七)

一、什么是迭代器模式 迭代器模式&#xff08;Iterator Pattern&#xff09;是一种行为型设计模式&#xff0c;它提供一种方法来顺序访问一个聚合对象中的各个元素&#xff0c;而不暴露其内部的表示。迭代器模式将集合的遍历过程封装在一个独立的迭代器对象中&#xff0c;这样…

硅谷甄选(10)用户管理

用户管理模块 9.1 静态搭建 主要是el-form、el-pagination <template><el-card style"height: 80px"><el-form :inline"true" class"form"><el-form-item label"用户名:"><el-input placeholder"请…

BGP路径属性与路由反射器

前言 IBGP水平分割规则用于防止AS内部产生环路&#xff0c;在很大程度上杜绝了IBGP路由产生环路的可能性&#xff0c;但是同时也带来了新的问题&#xff1a;BGP路由在AS内部只能传递一跳&#xff0c;如果建立IBGP对等体全互联模型又会加重设备的负担。 BGP 路径属性 AS_Path …

EtherCAT转ModbusTCP相关技术

EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关https://item.taobao.com/item.htm?ftt&id822721028899 MS-GW15 概述 MS-GW15 是 EtherCAT 和 Modbus TCP 协议转换网关&#xff0c;为用户提供一种 PLC 扩展的集成解决方案&#xff0c;可以轻松容易将 Modbu…

如何防止U盘盗取电脑数据?

数据安全无论是对企业还是个人都至关重要。这些用户群体随时面临着数据被窃取的风险&#xff0c;而 U 盘则成为了潜在的安全隐患。如果你想要禁止电脑上使用 这类USB 存储设备&#xff0c;看完这篇文章&#xff0c;防止 U 盘盗取数据并非难事。 禁止使用usb存储设备 打开电脑上…