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的更多相关文章

  1. ElementUi 表格取消全选框,用文字表示

    Echarts ElementUi 表格取消全选框,用文字表示 1.先看看实现的图 一. 添加添加复选框列 <el-table v-loading="zongShipLoading&q ...

  2. vue全选和取消全选

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. 转载:Bootstrap之表格checkbox复选框全选

    转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...

  4. 点击div全选中再点击取消全选div里面的文字

    想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...

  5. Bootstrap之表格checkbox复选框全选

    效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: <table class="table table-bordered table-hov ...

  6. Bootstrap之表格checkbox复选框全选 [转]

    转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以 ...

  7. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  8. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  9. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

随机推荐

  1. Python爬取10000条“爆款剧”——《三十而已》热评,并做可视化

    前言 继<隐秘的角落>后,又一部“爆款剧”——<三十而已>获得了口碑收视双丰收,王漫妮.顾佳.钟晓芹三个女主角的故事线频频登上微博热搜.该剧于2020年7月17日在东方卫视首播 ...

  2. SpringBoot之Quartz实战

    说明:由于上篇文章我们已经讨论过springboot整合Quartz及相关配置,本次我们只说明Qrtz的增.删.改.启动.停止相关api的使用,其中涉及的其他技术,如:mybatisplus等技术以后 ...

  3. SQLServer 把ID相同的多行数据合并到一起

    我们现在有以下GameArea表,以及与其关联的Proveince表: 我们现在需要把GameArea表中GameId相同的数据合并到一行显示,可以使用以下写法: SELECT GameID,STUF ...

  4. 区间DP 学习笔记

    前言:本人是个DP蒟蒻,一直以来都特别害怕DP,终于鼓起勇气做了几道DP题,发现也没想象中的那么难?(又要被DP大神吊打了呜呜呜. ----------------------- 首先,区间DP是什么 ...

  5. RxJS 中的观察者和迭代器模式

    目录 前言 观察者模式 迭代器模式 RxJS 中两种模式的结合和实现 小结 参考 1. 前言 RxJS 是一个库,它通过使用observable(可观察对象)序列来编写异步和基于事件的程序.其结合了观 ...

  6. 事件 - DOM编程

    何为 DOM 事件,HTML DOM 使JavaScript 有能力对 HTML 事件做出反应. 1. 事件流 一个 DOM 事件可以分为捕获过程.触发过程.冒泡过程. 下面一个<a>元素 ...

  7. java web工程导入jar包流程,容易犯错

    1)首先把jar包拷贝到WEB-INF/lib下 2)在Eclipse中web/WEB-INF/lib路径下刷新.(省略此步骤就会找不到) 3)Java Build Path中Remove掉Web A ...

  8. JS学习第四天

    循环语句 while(){ }: while :先判断再执行,如果while的条件结果为false,那么执行语句块中代码一句都不走 do(){ }while; do   while:先执行代码块中的语 ...

  9. Vue watch 深层监听

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性 watch: { 'deptModel.depts': { handler(newVal, oldVal) { ...

  10. C语言编译过程以及Windows中的gcc编译程序(通过cmd、记事本)

    C语言的编译过程 1)预处理:宏定义展开.头文件展开.条件编译等,同时将代码中的注释删除,这里并不会检查语法 2)编译:检查语法,将预处理后的文件编译生成汇编文件 3)汇编:将汇编文件生成目标文件(二 ...