el-table 去掉边框(修改颜色)

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

 原始:

el-table 去掉边框(修改颜色),vue.js,javascript,前端,elementui

去掉表格的border属性,每一行下面还会有一条线,并且不能再拖拽表头

el-table 去掉边框(修改颜色),vue.js,javascript,前端,elementui 

为了满足在隐藏表格边框的情况下还能拖动表头,修改相关css即可,如下代码

<style lang="less">
.table {
  //避免单元格之间出现白色边框
  .el-table__row > td {
    border: none;
  }

  //修改表格边框颜色
  .el-table {
    --el-table-border-color: #ffffff;
  }
}
</style>

最终效果:

 el-table 去掉边框(修改颜色),vue.js,javascript,前端,elementui

 el-table 去掉边框(修改颜色),vue.js,javascript,前端,elementui

其它代码 文章来源地址https://www.toymoban.com/news/detail-635717.html

<template>
  <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="Date" width="180"/>
        <el-table-column prop="name" label="Name" width="180"/>
        <el-table-column prop="address" label="Address"/>
      </el-table>
    </div>
</template>
<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

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

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

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

相关文章

  • Vue修改element-admin UI <el-table> tr 表-子项的高度 及背景颜色

    先看效果图-表头背景颜色高度  自定义 样式代码 -----别想着加  !important    我也试了不行 如果style 用了  :style lang=\\\"scss\\\" /* 注意此处不能有scoped 否则样式无法生效 */           那么去掉 ::v-deep 即可正常使用

    2024年02月15日
    浏览(51)
  • element-ui的el-table属性修改,如内边框,斑马纹,列宽度...

    el-table :data=\\\"tableData\\\" style=\\\"width: 100%\\\" border el-table-column prop=\\\"date\\\" label=\\\"日期\\\" width=\\\"180\\\"   /el-table-column el-table-column prop=\\\"name\\\" label=\\\"姓名\\\" width=\\\"180\\\" /el-table-column el-table-column prop=\\\"address\\\" label=\\\"地址\\\" /el-table-column /el-table 这个用来取消表格里面td的边框 ::v-deep .el-table__row td {   /* 去除表格

    2024年02月12日
    浏览(52)
  • Element UI <el-table>去除外边框

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

    2024年02月09日
    浏览(44)
  • 【elementplus】解决el-table使用el-popconfirm,只剩下一行数据时,popconfirm提示框会被el-table边框遮挡的问题

    首先,先通过以下链接的方法,解决 在el-table中使用popconfirm、popover、tooltip、select时,出现placement错位或者框被table的列遮挡的问题 然后就是有可能会出现 el-table只剩下一行数据,popconfirm提示框依旧会被el-table边框遮挡的问题 解决方案: 给el-table设置固定高度,通常我会给

    2024年02月12日
    浏览(42)
  • vue el-table-column 修改一整列的背景颜色

    目录 修改表头以及一整列数据的背景颜色,效果如下: 总结 修改表头以及一整列数据的背景颜色,效果如下: 修改表头背景颜色:在el-table绑定header-cell-style 修改一整列的数据背景颜色:在el-table绑定:cell-style=\\\"columnStyle\\\" 完整代码如下: 记录来源于需求,希望能帮助到你~

    2024年02月06日
    浏览(45)
  • el-table点击每一行加背景颜色

    HTML JS CSS 总结: 相当于是没次点击给它加个class类名,用到的是el-table的属性名【row-class-name】,然后还有每一行的点击事件【row-click】  给每一行滑过加高亮:  

    2024年01月19日
    浏览(43)
  • element ui - el-table 设置表头背景颜色和字体颜色

    在使用 elementui 中的 el-table 时,由于默认表格样式与设计稿不符,需要将表头的背景色和字体颜色设置为新颜色。 但是对 thead,thead tr,.el-table__cell 元素进行设置,都是无效的,查询了 elementui官网,发现需要使用 header-cell-style 属性。

    2024年02月12日
    浏览(76)
  • element-ui的el-table自带横线的去除 和 iview的table边框线去除

    记录一下这次遇到的问题,要求是去掉el-table所有的内外边框线 elementui的边框线去除 iviewui的table边框线去除

    2024年02月11日
    浏览(52)
  • el-table 设置行背景颜色 鼠标移入高亮问题处理

    后端返回表格数据,有特定行数需要用颜色标识。类似于以下需求: 方式 区别 :row-class-name=“tableRowClassName” 已返回类名的形式设置样式,代码整洁,但是会鼠标高亮,导致背景颜色失效 :cell-style=“cellStyle” 以返回样式的形式设置,无鼠标高亮问题 2.1 表格代码 2.2 :row-cla

    2024年02月15日
    浏览(55)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包