表格取消全选框,用文字表示--Echarts ElementUi
1.先看看实现的图
一. 添加添加复选框列
<el-table v-loading="zongShipLoading" tooltip-effect="dark" :header-cell-class-name="cellClass" height="350" ref="changeTable" @select="shipTableDataChange" :data="shipTableData">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column property="vesselNameCn" label="中文名称"></el-table-column>
<el-table-column property="vesselNameEn" label="英文名称"></el-table-column>
<el-table-column property="mmsi" label="MMSI"></el-table-column>
<el-table-column property="equipmentCode" label="设备编码"></el-table-column>
</el-table>
二.给 方法(这个方法主要就是给表格所需要的列添加类名。)具体可以看ElementUi的表格API
<el-table :header-cell-class-name="cellClass"></el-table>
cellClass(row){
if (row.columnIndex === 0) {
return 'disabledCheck'
}
},
> 备注:cellClass()方法主要给复选框那一列添加 类名为 ‘disabledCheck’
三.css样式设置
/* 去掉全选按钮 */
.el-table .disabledCheck .cell .el-checkbox__inner{
display: none !important;
}
.el-table .disabledCheck .cell::before{
content: '选择';
text-align: center;
line-height: 37px;
}
表格取消全选框,用文字表示--Echarts ElementUi的更多相关文章
- ElementUi 表格取消全选框,用文字表示
Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 <el-table v-loading="zongShipLoading&q ...
- vue全选和取消全选
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 转载:Bootstrap之表格checkbox复选框全选
转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...
- 点击div全选中再点击取消全选div里面的文字
想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...
- Bootstrap之表格checkbox复选框全选
效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class="table table-bordered table-hov ...
- Bootstrap之表格checkbox复选框全选 [转]
转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以 ...
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- js 全选选框与取消全选代码
设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...
随机推荐
- 利用WxJava实现PC网站集成微信登录功能
原文地址:https://mp.weixin.qq.com/s/rT0xL9uAdHdZck_F8nyncg 来源:微信公众号:java碎碎念 1. 微信开放平台操作步骤 微信开放平台地址:https ...
- ios迅雷上架成功的秘密 背后的“苹果TF签名”
距离ios迅雷从App Store下架已经过去很久了,小微经常看到知乎里有很多迅雷用户到处寻找可以下载应用的渠道.近期迅雷被爆“好消息”iOS 迅雷(官方版)正式上架 App Store,此消息一出可 ...
- python文件的执行
python文件的后缀名没有限制,但是为了后来导入模版的规范性,python代码通常以".py"作为后缀: python文件运行 一般情况都是解释器+文件名,如:python ** ...
- 牛!Python 也能实现图像姿态识别溺水行为了!
作者 | 李秋键 责编 | Carol 封图 | CSDN 下载自视觉中国 众所周知随着人工智能智能的发展,人工智能的落地项目也在变得越来越多,尤其是计算机视觉方面. 很多人学习python,不知道从 ...
- 使用HttpClient 发送 GET、POST(FormData、Raw)、PUT、Delete请求及文件上传
httpclient4.3.6 package org.caeit.cloud.dev.util; import java.io.File; import java.io.IOException; i ...
- Zabbix5 Frame 嵌套
Zabbix5 Frame 嵌套 Zabbix 默认不允许嵌套在其他页面上,通过修改配置允许嵌套 找到 Zabbix 下面的 include/defines.inc.php 文件,末尾有一行 defi ...
- java_线程、同步、线程池
线程 Java使用 java.lang.Thread 类代表线程,所有的线程对象都必须是Thread类或其子类的实例 Thread类常用方法 构造方法 public Thread():分配一个新的线程 ...
- 云原生数据库mysql对共享存储分布式文件系统的接口需求分析
1. 引言 云原生数据库跟分布式mpp数据库是有差异的,虽然两者都是计算与存储分离,但是在资源的占用上有所不同.云原生数据库是shard everything架构,其依赖的存储资源.内存资源.事务资源 ...
- 最新版CentOS8系统安装和基本配置
一.Centos8新版简介 Redhat公司在2019年5月推出了rhel8,年底推出了centos8,紧接着也会把相关的技术认证完全转换为新平台. 阿里云.华为云目前也已推出centos8的公共镜像 ...
- C#LeetCode刷题-拓扑排序
拓扑排序篇 # 题名 刷题 通过率 难度 207 课程表 40.0% 中等 210 课程表 II 39.8% 中等 329 矩阵中的最长递增路径 31.0% 困难