实现方法

首先,表格加一列

<el-table-column type="selection" width="55"></el-table-column>

然后,隐藏掉标头的全选全不选

thead .el-table-column--selection .cell{
display: none;
}

给表格加一个 ref,例如:ref="Table" (加在el-table的属性里)

给表格加一个事件 @selection-change="chooseInstance"

chooseInstance (val) {
if (val.length > 1) {
this.$refs.Table.clearSelection()
this.$refs.Table.toggleRowSelection(val.pop())
} else {
}
},

如果要实现点击表格的行就单选,再添一个 @current-change 事件:

在事件中:

currentChange(currentRow, oldCurrentRow) {
this.$refs.Table.toggleRowSelection(currentRow)
}

2020-01-12 更新

发现使用 @current-change 事件的时候,会出现点击某一行选中之后,如果点击前面的选择框去掉选中,那么再次点击当前行不会将选择框勾选,原因是这时候当前行并没有发生改变

所以,更好的方式是使用 @row-click 事件

例如:



ElementUI el-table 表格 行选择框改为单选的更多相关文章

  1. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  2. element-ui的table表格控件表头与内容列不对齐问题

    原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...

  3. ElementUI的Table表格添加自定义头CheckBox多选框

    在ElmentUI的Table表格组件中,也许你会使用type为selection值的多选框功能,但是此时设置的label属性不生效,不能设置标题名称:有时候我们的需求就是要添加标题名称,那该如何处理 ...

  4. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  5. 一个巧妙的方法实现elementUI的table的行选中

    问题背景:点击上面的框,选中下面对象的行数据 刚开始考虑使用的是table的事件:toggleRowSelection,但是发现一个奇怪的现象 <div v-if="orderData ...

  6. element-ui中 table表格hover 修改背景色

    增加样式级别就行啦   .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: #212e3e !i ...

  7. 删除table表格行

    function getRowObj(obj) {   while(obj.tagName.toLowerCase()!="tr")    // toLowerCase转化小写 { ...

  8. element-UI中table表格的@row-click事件和@selection-change耦合了

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark&quo ...

  9. vue+element-ui:table表格中的slot 、formatter属性

    slot 插槽,table中表示该行内容以自定义方式展示 :formatter 方法,用来格式化内容 Function(row, column, cellValue, index) html < ...

随机推荐

  1. JDK的卸载和安装

    Java入门 Java最大优势:基于JVM,跨平台 Java的几个版本 JavaSE:标准版,占领桌面,桌面程序,控制台开发等. JavaME:嵌入式开发,占领手机,手机,小家电等.(几乎死掉了) J ...

  2. python接口自动化之用HTMLTestRunner生成html测试报告

    [第一步]:引入HTMLTestRunner包 1.下载HTMLTestRunner,下载地址:http://tungwaiyip.info/software/HTMLTestRunner.html ...

  3. 在Linux系统下安装jdk并配置环境变量

    本文主要介绍的是如何是Linux环境下安装JDK的,因为Linux环境下,很多时候也离不开Java的,下面笔者就和大家一起分享如何jdk1.8的过程吧. 1.安装环境 操作系统:CentOS 07 6 ...

  4. [Linux] Ubuntu18.04 安装之后配置过程

    前言  最终还是安装了Ubuntu 虽然一开始想用Deepin 但是死活安装不上,我也很绝望(引导一直找不到 恢复BIOS默认设置也还是不行 所以 有些绝望啊....)  所以 为了让以后的我不再那么 ...

  5. jenkins新建任务详解

    一.新建任务 点击左侧新建任务 输入任务名称-->选择构建一个自由风格的软件项目-->确认 进入任务配置页面 二.基本配置 General 配置构建保留天数,保留个数,必要时并发构建 源码 ...

  6. Android Studio 初级控件笔记

    Android支持的像素单位 Android支持的像素单位有:px(像素).in(英寸).mm(毫米).pt(磅,1/72英寸).dp(与设备无关的显示单位).dip(就是dp).sp(用于设置字体大 ...

  7. python-excel读取-pyodbc

    https://github.com/mkleehammer/pyodbc/wiki/Cursor 利用pyodbc读取数据库,流程基本一样,就是配置connect对象时有所不同,下面是excel的: ...

  8. Docker - Deepin中docker不能启动容器,-d也无效

    问题重现 1. 搭建mysql docker run -p 3306:3306 --name docker-mysql-5.7 -v $PWD/conf:/etc/mysql/conf.d -v $P ...

  9. instrrev 和instr 区别vb

    Private Sub Form_click() Dim temp As String temp = "c:\window\system" Print Mid(temp, InSt ...

  10. sql 中联合查询语句

    在查询语句中 两张表进行查询,可以通过 left join (左连接查询) :返回左表中的所有记录和右表中联结字段相等的记录  (意思就是左表中的数据会全部显示,右表中只会显示和左表中相等的字段) r ...