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

需求:

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

                                 

官方文档一个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. 物流配送中心管理系统(SSM+MYSQL)

    工程项目视频观看地址:www.toutiao.com/i6804066711… 本文首先对系统所涉及到的基础理论知识进行阐述,并在此基础上进行了系统分析.系统分析是平台开发的一个不可缺少的环节,为了能 ...

  2. Numpy-np.random.normal()正态分布

    X ~ :随机变量X的取值和其对应的概率值P(X = ) 满足正态分布(高斯函数) 很多随机现象可以用正态分布描述或者近似描述 某些概率分布可以用正态分布近似计算 正态分布(又称高斯分布)的概率密度函 ...

  3. Spring Cloud 系列之 Config 配置中心(二)

    本篇文章为系列文章,未读第一集的同学请猛戳这里:Spring Cloud 系列之 Config 配置中心(一) 本篇文章讲解 Config 如何实现配置中心自动刷新. 配置中心自动刷新 点击链接观看: ...

  4. python 基础应用4

    1.列表所有元素全部单独输出 #所有元素全部单独输出 li = [1,2,3,'taibai',[4,5,6,'taibaia']] for i in li: if type(i) == list: ...

  5. 20184302 2019-2020-2 《Python程序设计》实验一报告

    20184302 2019-2020-2 <Python程序设计>实验一报告 课程:<Python程序设计> 班级: 1843 姓名: 李新锐 学号:20184302 实验教师 ...

  6. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  7. Alink漫谈(四) : 模型的来龙去脉

    Alink漫谈(四) : 模型的来龙去脉 目录 Alink漫谈(四) : 模型的来龙去脉 0x00 摘要 0x01 模型 1.1 模型包含内容 1.2 Alink的模型文件 0x02 流程图 0x03 ...

  8. 在IDEA中使用Spring写一个HelloWorld

    准备工作 1.使用IDEA2018专业版, 我试了IDEA2019教育版和IDEA2020社区版,都无法顺利创建一个Spring项目,实在是恼火,一气之下,统统卸载掉. 重装了一个IDEA2018专业 ...

  9. C语言基础知识(五)——数组与指针的等价表示

    void f(void) { int * p; int a[3] = {1,2,3}; p = a; printf("%d %d", a[0], p[0], *(a+1), *(p ...

  10. CSS3和HTML5头部定位自用

    body{ max-width: 540px; min-width: 320px; margin: 0 auto; font: normal 14px/1.5 tahoma; color: #000; ...