实现方法

首先,表格加一列

<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. MySQL数据库 | 数据表-查询命令详细记录

    本篇专门记录数据库增删改查中最常用.花招最多的 查. [文章结构] 一.数据的准备 二.基本的查询功能 三.条件查询 四.查询排序 五.聚合函数 六.分组查询 七.分页查询 八.连接查询 九.子查询 ...

  2. dfs题型一

    代码: #include <iostream> #include <algorithm> #include <vector> using namespace std ...

  3. mockito使用教程

    一.什么是 Mock 测试 Mock 测试就是在测试过程中,对于某些不容易构造(如 HttpServletRequest 必须在Servlet 容器中才能构造出来)或者不容易获取比较复杂的对象(如 J ...

  4. powerdesigner16.5改变数据模型字体大小

    1. 点击 2. 选择 3. 选择完点击确定后: 4. 点击设为默认:再点ok

  5. Java 数据库树形查询生成菜单结构

    Java 数据库树形查询 JAVA从数据库读取菜单,递归生成菜单树. 定义菜单类 public class Menu { // 菜单id private String id; // 菜单名称 priv ...

  6. 大白话Web三大组件之一Servlet

    很多学习到Servlet这里的童鞋,听到那么多专业名词解释这个Servlet,相信都是很蒙圈的,在这里我先不跟大家扯Servlet的大概念,先跟大家探讨一下关于Servlet的作用 相信MVC这个概念 ...

  7. jenkins+maven配置findbugs+checkstyle+pmd

    一.findbugs+checkstyle+pmd介绍 工具 目的 检查项 FindBugs 检查.class 基于Bug Patterns概念,查找javabytecode(.class文件)中的潜 ...

  8. Visual Studio 配置 fftw 库

    前提条件: 1.vs 2010 +(我的是2019): 2.下载 fftw. 先将vs 的 msvc 编译器的位置添加到path,一般在下面这个目录下: Microsoft Visual Studio ...

  9. STL顺序容器用法自我总结

    顺序容器类型:vector.deque.list.forward_list.string.array. queue(单向队列)底层也是用deque(双端队列)实现的 a.swap(b); swap(a ...

  10. C++实现索引堆及完整测试代码

    首先贴一篇我看的博客,写的很清楚.作者:Emma_U 一些解释 索引堆首先是堆,但比堆肯定是更有用. 用处: 1.加速. 索引堆存储的是索引,并不直接存储值.在堆上浮下沉的元素交换的时候,交换索引可比 ...