表格取消全选框,用文字表示--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& ...
随机推荐
- 从别人的代码中学习golang系列--03
这篇博客还是整理从https://github.com/LyricTian/gin-admin 这个项目中学习的golang相关知识. 作者在项目中使用了 github.com/casbin/casb ...
- python 调用百度接口 做人脸识别
操作步骤差不多,记得要在百度AIPI中的控制台中创建对应的工单 创建工单成功后 会生成两个key 这个两个key是要生成tokn 用 这里大家可以用 def函数 将token返回 供下面的接口使用 ...
- 解决 IntelliJ IDEA占用C盘过大空间问题
原文地址:https://blog.csdn.net/weixin_44449518/article/details/103334235 问题描述: 在保证其他软件缓存不影响C盘可用空间的基础上,当我 ...
- pycharm2020专业版永久激活
pycharm专业版激活 1. 下载pycharm(专业版) 注意:这里一定要去官网下载正版的专业版pycharm. pycharm官网 但是这是pycharm的最新版,目前激活教程仅适用以前的202 ...
- 2020牛客多校第八场K题
__int128(例题:2020牛客多校第八场K题) 题意: 有n道菜,第i道菜的利润为\(a_i\),且有\(b_i\)盘.你要按照下列要求给顾客上菜. 1.每位顾客至少有一道菜 2.给顾客上菜时, ...
- Python 教你自动发微博,每日一句英语
作者:周萝卜 最近在研究用 Python 来制作各个类别的机器人,今天先来分享一个自动发布新浪微博的机器人. 基本思路 其实要实现一个简单的自动发布微博机器人还是不难的,只需要每天按时找好要发布的素材 ...
- OS实现流程草稿
实现一个OS需要现在网上搜索 不要在Windows环境下写 nasm等汇编编译器的语法 bois中断函数使用 内存分布 描述符 实模式与保护模式 从实模式到保护模式比较难,可以从网上找一些代码能运行自 ...
- Vue中diff算法的理解
Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...
- Elasticsearch第三篇:查询详解
从第一篇开始,我用的ES版本就是7.8.0的,与低版本略有不同,不同点可以参考官方介绍,最大的不同就是抛弃 type 这一概念,为了方便测试,首先建立一个学生成绩的索引库(在建立的同时,规定字段类型, ...
- C#LeetCode刷题之#633-平方数之和( Sum of Square Numbers)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3885 访问. 给定一个非负整数 c ,你要判断是否存在两个整数 ...