实现方法

首先,表格加一列

<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之路之css

    方式三 方式四 <style type="text/css"> a:link{ color: red; } a:visited { color: blue; } a:h ...

  2. 怎么把html页面部署到云服务器上

    1,下载nginx 2,把页面放置到云服务器上 3,通过配置nginx conf下的nginx.conf文件,就可以通过ip:port访问到了 链接:https://www.cnblogs.com/f ...

  3. 文件上传plupload组件使用

    这段时间一直在使用文件上传,简要的介绍一下文件上传的组件使用,先上一段代码. var uploader = new plupload.Uploader( { //用来指定上传方式,指定多个上传方式请使 ...

  4. Android Socket 通信

    Android socket 通信 安卓编写Socket客户端,实现连接Socket服务端通信. 创建Socket连接并获取服务端数据 先创建几个全局变量吧 private BufferedWrite ...

  5. AC3 mantissa quantization and decoding

    1.overview 所有的mantissa被quantize到固定精确度的level(有相应的bap标识)上,level小于等于15时,使用symmetric quantization.level大 ...

  6. python 序列 倒着取元素

    当要倒着取元素时,用s[-2]只能取一个, 如果取多个时用s[-9:-1],注意,最后一个-1是不取出来的. 此时要用s[-9:] 最后一个空着就可以取出来了.

  7. python 字符串是否包含某个子字符串

    方法如下:以后再整理 if str1 in str2: 包含的话,True if str1.find(str2)>=0: 包含的话,返回第一次出现的位置,没有的话为负数 https://www. ...

  8. python正则非贪婪模式

    上一篇python正则匹配次数大家应该也发现了,除了?其他匹配次数规则都是尽可能多的匹配 那如果只想匹配1次怎么办呢,这就是正则中非贪婪模式的概念了 原理就是利用?与其他匹配次数规则进行组合 单个匹配 ...

  9. GitHub网页版基本操作

    创建存储库 登录GitHub进入主页,点击头像左边的加号,创建存储库 填写存储库名称.描述,根据需求设置其他选项.点击“Create repository”按钮 创建分支 打开之前创建好的存储库,点击 ...

  10. 概率DP hdu 3366 .

    题意:一个人被困在一个城堡里,面前有n条路,他自己有m百万元,选择每一条路都有p概率通过,q概率遇到士兵,1-p-q概率道路不通:遇到士兵的话需要上交1百万,如果不够钱,则被杀死,问的是最优情况下多少 ...