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. HA模式下的java api访问要点

    在非HA架构的HDFS中,客户端要通过java接口调用HDFS时一般是在JobRunner的类中按照下面的方式: 因为nodename只有一个节点所以会在代码中显式的指明要连接哪一个节点:但是在HA模 ...

  2. CF习题集二

    CF习题集二 一.CF507E Breaking Good 题目描述 \(Breaking Good\)这个游戏对于有经验的玩家来说也有一定的难度. 游戏的主角小明希望加入一个叫斧头帮的犯罪团伙.这个 ...

  3. python IF while逻辑判断语句

    if判断语句 if 1==1 and 2==2: pass else: print('error') if 1==1 or 2==2: pass else: print('error') while循 ...

  4. PR基础

    Windows->Workspace->Reset to saved layout 恢复工作区 Edit->Perferences->Auto Save 设置自动保存时间 资源 ...

  5. OpenCV开发笔记(六十九):红胖子8分钟带你使用传统方法识别已知物体(图文并茂+浅显易懂+程序源码)

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  6. .NET Core 微服务—API网关(Ocelot) 教程 [三]

    前言: 前一篇文章<.NET Core 微服务—API网关(Ocelot) 教程 [二]>已经让Ocelot和目录api(Api.Catalog).订单api(Api.Ordering)通 ...

  7. 高级搜索树-AVL树

    目录 平衡因子 AVL树节点和AVL树的定义 失衡调整 插入和删除操作 完整源码 AVL树是平衡二叉搜索树中的一种,在渐进意义下,AVL树可以将高度始终控制在O(log n) 以内,以保证每次查找.插 ...

  8. 检查型异常和非检查型异常——Java

    文章目录 检查型异常和非检查型异常--Java 检查型异常 非检查型异常 结语 检查型异常和非检查型异常--Java Java语言规范将派生于Error类或RuntimeExceprion类的所有异常 ...

  9. golang 设计模式

    前言 不做文字的搬运工,多做灵感性记录 这是平时学习总结的地方,用做知识库 平时看到其他文章的相关知识,也会增加到这里 随着学习深入,会进行知识拆分和汇总,所以文章会随时更新 参考的文章过多.很杂很乱 ...

  10. stat 命令家族(3)- 详解 mpstat

    性能测试必备的 Linux 命令系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1819490.html 介绍 输出 CPU 相关信息 m ...