表格取消全选框,用文字表示--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& ...
随机推荐
- Python爬取10000条“爆款剧”——《三十而已》热评,并做可视化
前言 继<隐秘的角落>后,又一部“爆款剧”——<三十而已>获得了口碑收视双丰收,王漫妮.顾佳.钟晓芹三个女主角的故事线频频登上微博热搜.该剧于2020年7月17日在东方卫视首播 ...
- SpringBoot之Quartz实战
说明:由于上篇文章我们已经讨论过springboot整合Quartz及相关配置,本次我们只说明Qrtz的增.删.改.启动.停止相关api的使用,其中涉及的其他技术,如:mybatisplus等技术以后 ...
- SQLServer 把ID相同的多行数据合并到一起
我们现在有以下GameArea表,以及与其关联的Proveince表: 我们现在需要把GameArea表中GameId相同的数据合并到一行显示,可以使用以下写法: SELECT GameID,STUF ...
- 区间DP 学习笔记
前言:本人是个DP蒟蒻,一直以来都特别害怕DP,终于鼓起勇气做了几道DP题,发现也没想象中的那么难?(又要被DP大神吊打了呜呜呜. ----------------------- 首先,区间DP是什么 ...
- RxJS 中的观察者和迭代器模式
目录 前言 观察者模式 迭代器模式 RxJS 中两种模式的结合和实现 小结 参考 1. 前言 RxJS 是一个库,它通过使用observable(可观察对象)序列来编写异步和基于事件的程序.其结合了观 ...
- 事件 - DOM编程
何为 DOM 事件,HTML DOM 使JavaScript 有能力对 HTML 事件做出反应. 1. 事件流 一个 DOM 事件可以分为捕获过程.触发过程.冒泡过程. 下面一个<a>元素 ...
- java web工程导入jar包流程,容易犯错
1)首先把jar包拷贝到WEB-INF/lib下 2)在Eclipse中web/WEB-INF/lib路径下刷新.(省略此步骤就会找不到) 3)Java Build Path中Remove掉Web A ...
- JS学习第四天
循环语句 while(){ }: while :先判断再执行,如果while的条件结果为false,那么执行语句块中代码一句都不走 do(){ }while; do while:先执行代码块中的语 ...
- Vue watch 深层监听
Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...
- C语言编译过程以及Windows中的gcc编译程序(通过cmd、记事本)
C语言的编译过程 1)预处理:宏定义展开.头文件展开.条件编译等,同时将代码中的注释删除,这里并不会检查语法 2)编译:检查语法,将预处理后的文件编译生成汇编文件 3)汇编:将汇编文件生成目标文件(二 ...