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. 唯一约束 UNIQUE KEY

    目录 什么是唯一约束 与主键的区别 创建唯一约束 唯一性验证 什么是唯一约束 Unique Key:它是 MySQL 中的唯一约束,是指在所有记录中字段的值不能重复出现.例如,为 id 字段加上唯一性 ...

  2. x86架构: 硬件启动过程分析(附引导启动代码)

    用户按下开机键,几秒的时间,都经历了啥? 1.cpu各个寄存器赋初始值,cs.base=0xffff0000, eip=0xfff0,其他寄存器都是0,这时cs:ip得到的物理地址:0xfffffff ...

  3. linux条件测试操作(test)和if判断语句,while循环语句,break控制语句和for循环和case多分枝语句和select语句

    条件测试操作 条件测试是专为影响"$?"的操作,是条件转移.循环语句的基础   test测试命令: test 用途:测试特定的表达式是否成立,当条件成立时,命令执行后的返回值为0, ...

  4. Android 的重要控件 ListView (听说是最难最常用的控件)

    这个打字有点慢了,左手受伤了,不过很幸运,左手小拇指没事(这就可以愉快地使用快捷键啦!),虽然有伤,但还是得坚持总结,不只是为自己,还为未来的你们铺路,希望我写的,对你们有帮助. 提前给自己一个祝福: ...

  5. Cross-Stage-Partial-Connections

  6. 学习Hibernate5 JPA这一篇就够了

    配套资料,免费下载 链接:https://pan.baidu.com/s/158JkczSacADez-fEMDXSYQ 提取码:2ce1 复制这段内容后打开百度网盘手机App,操作更方便哦 第一章 ...

  7. 使用 .NET Core 3.x 构建 RESTFUL Api

    准备工作:在此之前你需要了解关于.NET .Core的基础,前面几篇文章已经介绍:https://www.cnblogs.com/hcyesdo/p/12834345.html 首先需要明确一点的就是 ...

  8. 【Linux】zookeeper-3.5.6最新版安装攻略,以及安装问题汇总

    第一步下载:https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/zookeeper-3.5.6/ 浏览器打开这个地址下载我们需要的安装包 apa ...

  9. 一文看懂 Netty 架构设计

    本文重点分析 Netty 的逻辑架构及关键的架构质量属性,希望有助于大家从 Netty 的架构设计中汲取营养,设计出高性能.高可靠性和可扩展的程序. Netty 的三层架构设计 Netty 采用了典型 ...

  10. unity探索者之安卓微信登录,非第三方插件

    版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/7666348.html 之前写了两篇关于微信分享的博客,其实微信登录.分享.支付博主 ...