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. 不要再问我MVC、MVP、MVVM了

    网络上有很多类似的讨论.包括一些大v,比如 阮一峰:MVC,MVP 和 MVVM 的图示 廖雪峰:MVVM 司徒正美: 各自用一句话来概括MVC.MVP.MVVM的差异特点 ... 但是说的往往比较概 ...

  2. 关于Linux目录访问函数总结

    Linux下目录访问函数总结,主要是涉及到的函数,以及所在头文件. 获得工作目录: #include   <unistd.h>   char   *getcwd(char   *buf,s ...

  3. application.yml使用@符合问题:'@' that cannot start any token. (Do not use @ for indentation)

    在application配置文件中使用@出现异常: Exception in thread "main" while scanning for the next tokenfoun ...

  4. Linux学习笔记之如何设置vim中的格式如行号等

    在我们编写代码程序时,我们时常想追求更好的格式,下面写一下我认为挺实用的格式命令以及如何更改 如果我们打开vim在其命令模式中输入格式命令时,下一次重新打开vim还是会和原先一样,所以我们需更改其配置 ...

  5. MySQL回表查询

    一.MySQL索引类型 1.普通索引:最基本的索引,没有任何限制 2.唯一索引(unique index):索引列的值必须唯一,但是允许为空 3.主键索引:特殊的唯一索引,但是不允许为空,一般在建表的 ...

  6. 2020-04-13:TCP协议本身会导致什么样的安全问题?

    福哥答案2020-04-14: 洪泛攻击    

  7. 2020-03-27:JDK1.8中在数据结构上,对HashMap做了什么样的改进?为什么?

    福哥答案2020-04-04:头插改尾插,解决链表成环的问题.链表改成链表和红黑树.

  8. C#LeetCode刷题-几何

    几何篇 # 题名 刷题 通过率 难度 587 安装栅栏   21.5% 困难 892 三维形体的表面积 C#LeetCode刷题之#892-三维形体的表面积(Surface Area of 3D Sh ...

  9. C#LeetCode刷题之#441-排列硬币(Arranging Coins)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3995 访问. 你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状 ...

  10. vue 公众号H5 使用微信JSAPI 录音 完整齐全

    官方文档必须首当其冲 1.微信jsAPI 录音文档 2.获取微信临时素材文档 首先H5录音功能的话 对于普通H5网上是有很多的方法 插件  但是兼容性很差 特别是对于ios 一开始想的是用H5 做个通 ...