ElementUI el-table 表格 行选择框改为单选
实现方法
首先,表格加一列
<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 表格 行选择框改为单选的更多相关文章
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- element-ui的table表格控件表头与内容列不对齐问题
原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...
- ElementUI的Table表格添加自定义头CheckBox多选框
在ElmentUI的Table表格组件中,也许你会使用type为selection值的多选框功能,但是此时设置的label属性不生效,不能设置标题名称:有时候我们的需求就是要添加标题名称,那该如何处理 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- 一个巧妙的方法实现elementUI的table的行选中
问题背景:点击上面的框,选中下面对象的行数据 刚开始考虑使用的是table的事件:toggleRowSelection,但是发现一个奇怪的现象 <div v-if="orderData ...
- element-ui中 table表格hover 修改背景色
增加样式级别就行啦 .el-table--enable-row-hover .el-table__body tr:hover>td{ background-color: #212e3e !i ...
- 删除table表格行
function getRowObj(obj) { while(obj.tagName.toLowerCase()!="tr") // toLowerCase转化小写 { ...
- element-UI中table表格的@row-click事件和@selection-change耦合了
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark&quo ...
- vue+element-ui:table表格中的slot 、formatter属性
slot 插槽,table中表示该行内容以自定义方式展示 :formatter 方法,用来格式化内容 Function(row, column, cellValue, index) html < ...
随机推荐
- DBContext基础查询
https://www.cnblogs.com/gosky/p/5752001.html 遍历所有实体 //遍历所有学生 DBSet using (var db = new Entities()) { ...
- 第七章 类(class)7.1 笔记
最好不要把对象的定义和类的定义放在一起,这么做无异于把两种不同实体的定义混在了一条语句里,一会定义类,一会又定义变量,显然这是一种不被建议的行为. 类的定义最后要加上分号(:) 成员函数的声明必须放在 ...
- 【转】Java8 Stream 流详解
当我第一次阅读 Java8 中的 Stream API 时,说实话,我非常困惑,因为它的名字听起来与 Java I0 框架中的 InputStream 和 OutputStream 非常类似.但是 ...
- JS table新增一行的时候 如何在新增的这一行把样式也加进去 例如变成<tr class="trd0">
JS table新增一行的时候 如何在新增的这一行把样式也加进去 例如变成<tr class="trd0">5 JS: var tab = document.get ...
- 查看和设置mysql字符集
http://218.194.248.2/~wuxiaogang/cpcourse/database/mysql/charset.htm 1. 修改mysql的my.cnf# vi /etc/my.c ...
- win api + ffmpeg 播放 mp3 音乐
暂时记录,还有很多需要改善的地方一直没弄好,比如不知道怎么对上正确的播放速度. 有一些多余的代码,不用在意. #include <iostream> #include <fstrea ...
- UNICODE编码UTF-16 中的Endian(FE FF) 和 Little Endian(FF FE)
从网上找到的两篇不错的文章,由于被网上多处转载,所以不知道源处,未能注明出处,希望作者见谅,如有意见请发信给我,谢谢! 第一篇很清晰. 介绍Unicode之前,首先要讲解一些基础知识.虽然跟Unico ...
- 线段树+扫描线 NAIPC 2019 Intersecting Rectangles
你看看你有多菜,一点线段树的小小的运用,就不会写了: 题意:如果矩阵有交集,输出1,否则输出0(不包含内嵌): 思路:本题求交集,还得不包括内嵌的情况: 做过一道是求面积的题.跟这道类似,但在这里定义 ...
- Vue 高德地图 路径规划 画点
CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...
- python的scribe client
在网上找了一个python的scribe client使用方法 依赖的模块: pip install facebook-scribe pip install thrift 代码例子: #!/usr/b ...