表格取消全选框,用文字表示--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& ...
随机推荐
- 不要再问我MVC、MVP、MVVM了
网络上有很多类似的讨论.包括一些大v,比如 阮一峰:MVC,MVP 和 MVVM 的图示 廖雪峰:MVVM 司徒正美: 各自用一句话来概括MVC.MVP.MVVM的差异特点 ... 但是说的往往比较概 ...
- 关于Linux目录访问函数总结
Linux下目录访问函数总结,主要是涉及到的函数,以及所在头文件. 获得工作目录: #include <unistd.h> char *getcwd(char *buf,s ...
- application.yml使用@符合问题:'@' that cannot start any token. (Do not use @ for indentation)
在application配置文件中使用@出现异常: Exception in thread "main" while scanning for the next tokenfoun ...
- Linux学习笔记之如何设置vim中的格式如行号等
在我们编写代码程序时,我们时常想追求更好的格式,下面写一下我认为挺实用的格式命令以及如何更改 如果我们打开vim在其命令模式中输入格式命令时,下一次重新打开vim还是会和原先一样,所以我们需更改其配置 ...
- MySQL回表查询
一.MySQL索引类型 1.普通索引:最基本的索引,没有任何限制 2.唯一索引(unique index):索引列的值必须唯一,但是允许为空 3.主键索引:特殊的唯一索引,但是不允许为空,一般在建表的 ...
- 2020-04-13:TCP协议本身会导致什么样的安全问题?
福哥答案2020-04-14: 洪泛攻击
- 2020-03-27:JDK1.8中在数据结构上,对HashMap做了什么样的改进?为什么?
福哥答案2020-04-04:头插改尾插,解决链表成环的问题.链表改成链表和红黑树.
- C#LeetCode刷题-几何
几何篇 # 题名 刷题 通过率 难度 587 安装栅栏 21.5% 困难 892 三维形体的表面积 C#LeetCode刷题之#892-三维形体的表面积(Surface Area of 3D Sh ...
- C#LeetCode刷题之#441-排列硬币(Arranging Coins)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3995 访问. 你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状 ...
- vue 公众号H5 使用微信JSAPI 录音 完整齐全
官方文档必须首当其冲 1.微信jsAPI 录音文档 2.获取微信临时素材文档 首先H5录音功能的话 对于普通H5网上是有很多的方法 插件 但是兼容性很差 特别是对于ios 一开始想的是用H5 做个通 ...