实现方法

首先,表格加一列

<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. django 模型增加字段后迁移失败

    任      务:已有models.py文件中定义了 ad类(用来描述广告数据库表结构).现在想增加四个新字段:ad_show_type,big_video_url,is_full_screen,vi ...

  2. Perl unless

    在perl的if控制结构中,只有当条件表达式为真时才执行某块代码.如果想让程序块在条件为假时才执行,此时可以把if改成unless 例如: unless ($fred =~ /^([A-Z_]\w*$ ...

  3. python开发基础作业02:三级菜单,使用字典dic及列表

    作业要求及提示:三级菜单 ''' 1.三级菜单 2.可依次进入各子菜单 3.菜单能够回到上一级 4.用到知识点:字典.列表.多层循环.函数 条件:基本  if  else 嵌套  if...if... ...

  4. 线段树+扫描线 NAIPC 2019 Intersecting Rectangles

    你看看你有多菜,一点线段树的小小的运用,就不会写了: 题意:如果矩阵有交集,输出1,否则输出0(不包含内嵌): 思路:本题求交集,还得不包括内嵌的情况: 做过一道是求面积的题.跟这道类似,但在这里定义 ...

  5. 断点调试,issubclass和ininstance的使用

    一等公民 只要可以把一个东西赋值给一个变量,这个东西就叫一等公民 断点调试 在想要加断点的地方用鼠标点击一下,你会看到一个红色圆圈 变红的地方,程序执行到,就会暂停 断电应该加载报错之前 绿色箭头表示 ...

  6. Adobe PS

    1. ctrl + Tab  切换视图窗口 2.shift 拖拽图片,将 2 张图片放在一起 3.切换显示方式 /全屏/带有工具栏 快捷键:F 4. 缩小/放大工具 快捷键: alt + 鼠标滑轮 5 ...

  7. [2020BUAA软工助教]第1次个人作业

    热身作业(阅读) 一.前言 我认为人生就是一次次地从<存在>到<光明>. 二.软件工程师的成长 博客索引 同学们在上这门课的时候基本都是大三,觉得在大学里,到教室来听课有意思么 ...

  8. python 读写函数

    1.open 使用open打开文件后一定要记得调用文件对象的close()方法.比如可以用try/finally语句来确保最后能关闭文件. file_object = open('thefile.tx ...

  9. 如何修改mysql 默认引擎为InnoDB?

    1.查看 MySQL支持的引擎有哪些? show engines: 结果: 由上图可以看出,只有 InnoDB 是支持事务的 2.查看默认引擎 show variables like “default ...

  10. 推荐算法之---FM算法;

    一,FM算法: 1,逻辑回归上面进行了交叉特征.算法复杂度优化从O(n^3)->O(k*n^2)->O(k*n). 2,本质:每个特征都有一个k维的向量,代表的是每个特征都有k个不可告人的 ...