最近写到一个项目需要实现边框隐藏,网上查找了好多笔记,回答都好含糊不清。为此,记录一下自己的实现方法:

需求:

  要将如下表格边框去除                   效果图:

                                 

官方文档一个borde属性可以去除边框(点此查看 ),但是那只是控制纵向边框,这里主要是要解决横向边框,所以我通过f12对页面进行调试,得到解决方法。

附上代码:

<style>
.container_lefts .el-table td,
.container_lefts .el-table th.is-leaf,
.container_lefts .el-table--border,
.container_lefts .el-table--group {
border: none;
cursor: pointer;
}
.container_lefts .el-table::before {
height:;
}
</style>

注意:1、此处的.container_lefts 要更改为你的el-table标签的父标签类名 不然不能生效。

   2、如果你和我一样是在vue项目中使用,这一段css样式不能写在<style scoped="scoped">中,不然可能会不生效。可以另外在底下在写一个<style>标签然后在里面编写样式。

    

最后就可以实现预期效果啦!

关于vue 中elementui 的表格边框隐藏的更多相关文章

  1. 实现在vue中element-ui的el-dialog弹框拖拽

    参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...

  2. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

  3. 在vue 中 element-ui table结合Popover使用

    在vue 中 element-ui table结合Popover使用 <el-table-column label="操作" > <template slot-s ...

  4. 在vue中导出excel表格

    初学者学习vue开发,想把前端项目中导出Excel表格,查了众多帖子,踩了很多坑,拿出来与大家分享一下经验. 安装依赖 //npm npm install file-saver -S npm inst ...

  5. Vue中导出Excel表格方法

    本文记录一下在Vue中实现导出Excel表格的做法.参考度娘上各篇博客,最后实现功能 Excel表格,我的后端返回的是数据流,然后文件名是放进了content-disposition中,前端进行获取. ...

  6. vue中导出Excel表格

    项目中我们可能会碰到导出Excel文件的需求,一般后台管理系统中居多,将table中展示的数据导出保存到本地.当然我们也可以通过一些处理来修改要导出的数据格式,具体需求具体对待. 1.首先我们需要安装 ...

  7. vue 中 element-ui 引入方式

    目录 前言 全部引用 单个引用 前言 有时候只会使用到 Element-ui 的部分功能,为了减少文件体积建议使用分开引用,即只引用使用的功能. 注意:在main.js中使用部分引用的时候是 impo ...

  8. vue中Element-ui样式修改

    下拉框(el-dropdown) // hover 下拉框的hover效果 .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is ...

  9. vue中element-ui树形控件自定义节点,注意一下

    在项目中用到菜单项编辑删除,在 element-ui自定义节点内容时, 有说明:使用render-content指定渲染函数, 得环境支持 JSX 语法,只要正确地配置了相关依赖,就可以正常运行. 一 ...

随机推荐

  1. 【FPGA篇章二】FPGA开发流程:详述每一环节的物理含义和实现目标

    欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 FPGA的开发流程是遵循着ASIC的开发流程发展的,发展到目前为止,FPGA的开发流程总体按照下图进行,有些步骤可能由于其在当前项目中的条件 ...

  2. js中刷新页面的方式总结

    1.window.onload / document.onload 2.history.go(num): (1)num为参数,num为正表示前进几个页面,类似于history.forward(): ( ...

  3. MySQL 入门(3):事务隔离

    摘要 在这一篇内容中,我将从事务是什么开始,聊一聊事务的必要性. 然后,介绍一下在InnoDB中,四种不同级别的事务隔离,能解决什么问题,以及会带来什么问题. 最后,我会介绍一下InnoDB解决高并发 ...

  4. 【Scala】看代码,初步了解Apply方法

    class ApplyTest(val name:String) { /** * apply源码 * def apply(x: Int, xs: Int*): Array[Int] = { * val ...

  5. Day_09【常用API】扩展案例6_将用户给定的字符串首个字符大写,并分别加上"set"和"get"输出

    定义如下方法public static String getPropertyGetMethodName(String property) (1)该方法的参数为String类型,表示用户给定的成员变量的 ...

  6. 字节码编程,Javassist篇三《使用Javassist在运行时重新加载类「替换原方法输出不一样的结果」》

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 通过前面两篇 javassist 的基本内容,大体介绍了:类池(ClassPool) ...

  7. AOP行为日志

    最近新项目要记录行为日志,很久没有用AOP,研究了一下. 废话补多少,先上个流程图: 数据库日志表设计 字段名称 字段类型 注释 LOG_ID VARCHAR2(255)   LOG_LEVEL  N ...

  8. C# 数据操作系列 - 8. EF Core的增删改查

    0.前言 到目前为止,我们看了一下如何声明EF Core的初步使用,也整体的看了下EF Core的映射关系配置以及导航属性的配置. 这一篇,我带大家分享一下,我在工作中需要的EF Core的用法. 1 ...

  9. css多行省略和单行省略

    实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但 ...

  10. spark机器学习从0到1介绍入门之(一)

      一.什么是机器学习 机器学习(Machine Learning, ML)是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析.算法复杂度理论等多门学科.专门研究计算机怎样模拟或实现人类的学习行 ...