Element UI <el-table>去除外边框

这篇具有很好参考价值的文章主要介绍了Element UI <el-table>去除外边框。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 使用 Element UI <el-table>時,总会自带外边框,写了好多css样式始终不能去除,最终发现是th与td所带的样式。

el-table去除边框,vue.js,javascript,前端,elementui

代码如下

el-table 加 class="customer-no-border-table" 

<el-table
  :data="personnelList" 
  style="width: 100%"
  class="customer-no-border-table" 
  @selection-change="handleSelectionChange">
   <el-table-column type="selection" width="55"></el-table-column>
    
</el-table>

 CSS样式

/*去掉表格单元格边框*/
   .customer-no-border-table th{
     border:none;
   }
.customer-no-border-table td,.customer-no-border-table th.is-leaf {
  border:none;
}
 /*表格最外边框*/
.customer-no-border-table .el-table--border, .el-table--group{
     border: none;
   }
  /*头部边框*/
   .customer-no-border-table thead tr th.is-leaf{
     border: 0px solid #EBEEF5;
     border-right: none;
   }
.customer-no-border-table thead tr th:nth-last-of-type(2){
  border-right: 0px solid #EBEEF5;
}
 /*表格最外层边框-底部边框*/
.customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
     width: 0;
   }
.customer-no-border-table::before{
  width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
.customer-no-border-table .el-table__header tr th{
  background: #fff;
  color: #333333 ;
  padding: 3px ;
  fontWeight: 550 ;
  height: 36px ;
  border: 0px;
  font-size: 15px;
}

修改完后**********************边框已经去除 

el-table去除边框,vue.js,javascript,前端,elementui文章来源地址https://www.toymoban.com/news/detail-698672.html

到了这里,关于Element UI <el-table>去除外边框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue使用element-ui,el-table不显示

    例如:新增了一个表格,按官网代码贴过来的,结果一直不显示 代码如下一模一样,其他数据正常显示,就表格不显示 其实版本库不一致导致的,贼坑,又不提示 先卸载element-ui安装一个低版本的element-ui就可以解决``

    2024年02月11日
    浏览(61)
  • vue(element ui )el-table树形表格展示及数据对齐

    注意点: el-table配置里 row-key 必须是唯一性 :tree-props=“{ children: ‘relatedPartyChild’ , hasChildren: ‘hasChildren’ }” children配置为后端返回的节点字段即可

    2024年02月16日
    浏览(46)
  • Vue+Element Ui实现el-table自定义表头下拉选择表头筛选

    用vue+element ui开发管理系统时,使用el-table做表格,当表格列过多的时候,想要做成可选表头的,实现表格列的筛选显示,效果如下: 代码文件结构: 废话不多说,直接上代码: 第一步:新建名为 TableHeaderRender.vue 的文件 template   el-popover     placement=\\\"bottom\\\"     width=\\\"2

    2024年02月02日
    浏览(63)
  • vue element-ui表格(el-table)数据导出execl文件

    功能实现:element UI 的el-table数据导出为execl文件 使用到插件:xlsx、file-saver exportExecl.js 代码如下: 页面代码如下:

    2024年02月14日
    浏览(52)
  • Vue 中 Element UI 的 el-table 组件实现动态表头和内容

    在 Vue 中使用 Element UI 的 el-table 组件时,为了实现动态表头(包括第一层表头及其下的嵌套表头或子表头)。需要后端返回的数据结构能够体现表头层级关系以及对应的数据结构相匹配。这样的数据通常是一个嵌套数组,每个表头单元可能包含自身的列信息以及它的子表头和

    2024年01月20日
    浏览(52)
  • vue使用Element UI时,el-table表格整行操作单选

    需求:表格复选修改为单选,只可选择一个;不满足条件的不可勾选;可进行整行操作 注意使用的方法. 需求由复选改为单选后, 左上角全选框要进行隐藏 ,复选框也变成单选框,这里是通过css样式进行调整的 勾选复选框的select和整行操作的row-click可以共用同一个方法,

    2024年02月14日
    浏览(43)
  • vue element ui el-table单元格里面显示多张图片点击并放大

    效果图: 一个单元格里面显示三张图片,并且点击图片可以放大。 1.将图片v-for渲染出来,具体上代码 注:el-popover的属性   2.单元格里能够展示多张图片,需要在请求的接口里面做处理 以上两步,就可以实现上面的功能。

    2024年02月07日
    浏览(48)
  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(52)
  • 随手记:使用sortable.js 实现element-ui el-table 表格上下拖拽排序

    需求场景: 表格可以实现上下拖拽row实现新排序 首先,安装sortable.js  引入表格排  全局挂在组件 使用页面引入 使用sortable.js表格一定要有唯一的row-key,一般绑定的是id,不然拖拽会不生效 data声明 sortableContainer: null,为的是后面如果有需要可以做销毁操作   因为我这里是表

    2024年02月22日
    浏览(52)
  • 解决vue-electron element-UI中el-table表格不显示

    问题:element-UI官网上el-table组件,引入自己项目的时候表格不显示。 解决方案: 修改.electron-vuewebpack.renderer.config.js 将 修改为 即可解决。

    2024年02月16日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包