实现方法

首先,表格加一列

<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. python之路xml模块补充

    创建一个子节点一共有三个方式 创建一个子节点2.3

  2. spring(三):DefaultListableBeanFactory

  3. mybatis(六):设计模式 - 装饰器模式

  4. torch.cat拼接 stack拼接 分块chunk

    torch.cat拼接 stack拼接 分块chunk 待办 https://blog.csdn.net/qq_39709535/article/details/80803003 stack dim理 ...

  5. _mysql_exceptions.OperationalError: (2013, 'Lost connection to MySQL server during query')

    最近写了一个定时脚本,每天凌晨跑,每次跑时间很长. 在测试这个脚本的时候,跑了一个小时,发生一个错误,脚本中断,错误如下: _mysql_exceptions.OperationalError: (2 ...

  6. 矩阵快速幂 F[n]=F[n-2]*2+F[n-1]+i^4 hdu5950

    #include<cstdio> #include<algorithm> #include<math.h> #include<string.h> usi ...

  7. Map.Entry 类使用简介(转)

    Map.Entry 类使用简介(转)   你是否已经对每次从Map中取得关键字然后再取得相应的值感觉厌倦?使用Map.Entry类,你可以得到在同一时间得到所有的信息.标准的Map访问方法如下: Se ...

  8. 数据库程序接口——JDBC——功能第五篇——批量处理

    综述 批量处理一般指批量插入,批量更新,删除通过可以指定where条件实现.批量插入的实现方式有三种类型.statement,preparedStatement,callableStatement. ...

  9. Docker - 命令 - docker container

    概述 整理 docker 容器的命令 1. 分类(25个) 查看 ls diff logs inspect port stats top 生命周期 pause prune create kill re ...

  10. Educational Codeforces Round 80 (Rated for Div. 2)E(树状数组,模拟,思维)

    #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; ],mx[],a[],pos[],sum ...