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 < ...
随机推荐
- NotePad++安装及配置
NotePad++是一款轻量级的语言开发工具,是学习编程语言入门工具. 下面介绍下配置方法(Java为例) 配置插件NppExec 配置JAVA编译命令javac 配置JAVA运行命令java 上述两 ...
- (c#)删除链表中的节点
题目 解: 解析: n1→n2→n3→n4删除n2即将n2更改成n3n1→n3(n2)→n4
- 每天进步一点点------Allegro 手工布线时控制面板各选项说明
在进行手工布线过程中,最重要的就是对控制面板中的各个选项进行设置,因此首先介绍控制面板中各个选项的含义. 手工布线的命令为Route->connect,执行命令后,右侧控制面板如图8.14所示. ...
- 水题Eating Soup
A. Eating Souptime limit per test1 secondmemory limit per test256 megabytesinputstandard inputoutput ...
- const在C与C++中的区别
在C中,const不是常量,只能说是一个不能改变的变量(注意是变量),C编译器不能把const看成看成一个编译期间的常量,因为他在内存中有分配,C编译器不知道他在编译期间的值.所以不能作为数组定义时的 ...
- CDH安装错误集锦
CDH安装过程中出现的错误 1.iptables: /sbin/iptables 不存在 我是因为误删将 /sbin/下的文件删除了. 解决方法: yum install iptables 2.c ...
- 508,css优先级算法如何计算?
优先级就近原则,同权情况下样式定义最近者为准 载入样式以最后载入的定位为准 优先级:!important>id > class >tag; !important比内联优先级高 (百 ...
- cube-ui IndexList 切换Tab Y坐标归零
<template> <div class="fx t12 column"> <div class="order_search_div fl ...
- aarch64环境下,搭建并配置服务器tomcat:
aarch64环境下,搭建并配置服务器tomcat: 环境说明及下载相关文件: 1. ARM环境:aarch64开发板 2.JDK安装包: jdk-8u231-linux-arm64-vfp-hflt ...
- H5拖动事件复习
定义和用法 ondrag 事件在元素或者选取的文本被拖动时触发. 拖放是 HTML5 中非常常见的功能. 更多信息可以查看我们 HTML 教程中的 HTML5 拖放. 注意: 为了让元素可拖动,需要使 ...