el-table纵向边框不显示

最新推荐文章于 2024-06-28 11:27:16 发布
最新推荐文章于 2024-06-28 11:27:16 发布
阅读量1.1k 收藏 1
点赞数
文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59029117/article/details/131986150
版权
在使用ElementUI的el-table组件时，设置border属性后，发现只有表头和外边框有边框，单元格内部的纵向边框未显示。通过浏览器调试工具的检查发现，开启某一特定样式可以显示右侧边框。这可能是由于默认样式覆盖或者CSS冲突导致的。
摘要由CSDN通过智能技术生成

即使设置了el-table中的属性border,只有表头以及外边框添加了边框属性，单元格依然没有纵向边框的显示，这与elementui官网所演示的略有不同。

打开调试工具发现

把这里打开就可以显示右侧边框了 

 

 

又是江滨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
去除elementUI＜el-table＞表格线
m0_60540878的博客
08-27 6019
表格去除boder后还是有表格线这就需要其他操作 1、表格结构：在表格外层包一层自定义的class，利用三箭头深度修改 2、去除表格线 .my_table >>> .el-table__row>td{ /* 去除表格线 */ border: none; } 结果： 3、去除上边框： .my_table >>> .el-table th.is-leaf { /* 去除上边框 */ border: none; } ...
element中表头添加边框，右侧边框不显示的问题
L_eiDigaga的博客
05-17 2541
在最近的大屏项目中使用element的表格，要固定表头，还要修改原样式，其他样式都好修改，唯独给表头添加边框时，会有问题，右侧边框显示不出来。 就像这样，试了各种办法，因为固定表头后，下方内容就会出现滚动条，所以它这个表头的末尾添加了一个空的th和滚动条的宽度一样影响的。 起初给这个空标签添单独加左边框也能实现，但是当内容长度达不到滚动时或者空内容时，就不好使了，最后发现被一个属性影响了 这就简单了 更改这个属性为默认值真解决了 /deep/.el-table .el-table__header
VUE中，table border属性的不同使用方式
最新发布
qingdatiankong的博客
06-28 292
VUE中，table border属性的使用方式
el-table添加border边框线不显示
weixin_48305373的博客
08-23 6867
1.固定了表格的高度 height=“250” 把高度去掉。注意要把表单的高度去掉不然会有表单对不齐。
el-table的border属性失效问题解决方案
qq_71214810的博客
03-15 2810
如图所示，下面是el-table使用了border属性后没有效： 看了下官方文档，并且检查了下自己写的并没有错误
vue-print-nb 打印el-tabel表格时border不显示问题
m0_69722446的博客
06-27 2887
【代码】vue-print-nb 解决 vue 打印el-tabel表格时border不显示问题。
element UI 表格组件＜el-table＞不显示纵向滚动轴(Y轴)，滑动操作失效
gzs9527的博客
08-16 3031
element UI 表格组件不显示纵向滚动轴(Y轴) 原因 一种可能是，你使用了 el-table-column 的 fixed 属性。全部删除该属性后，可以显示纵向滚动轴 element UI 表格组件无法滑动操作（指触屏的滑动操作）（鼠标滚动操作依然有效） 原因 同样是使用了 el-table-column 的 fixed 属性导致。只有未配置该属性的列，才能触发滑动操作 说明 （深层原因未探究） ...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
vue修改Element的el-table样式的4种方法
10-14
在Vue.js中，Element UI库提供了丰富的组件，其中包括el-table，用于创建数据表格。然而，有时我们可能需要根据项目需求自定义el-table的样式。本文将详细介绍四种在Vue中修改Element UI el-table样式的有效方法。 ...
vue el-table实现行内编辑功能
10-15
在Vue.js中，Element UI库提供了丰富的UI组件，其中`el-table`是用于展示表格数据的一个强大组件。本文将详细讲解如何在Vue项目中利用Element UI的`el-table`实现行内编辑功能。 首先，我们需要在`el-table`的表头...
el-table实现选择列显示.zip
04-07
本示例"el-table实现选择列显示"是关于如何在Element UI的表格组件中实现用户自定义选择列显示的功能。下面我们将详细探讨这一主题。 1. **Element UI的el-table组件** - el-table是Element UI中的核心组件之一，...
Element-UI升级后，el-table不显示 空白问题 备份包 资源备份
10-26
然而，在进行Element-UI版本升级时，可能会遇到一些兼容性或配置问题，导致组件无法正常工作，比如在本案例中提到的“el-table不显示空白问题”。以下是对这个现象的深入分析及解决策略。 首先，让我们了解可能的...
el-table fixed以后，border消失
weixin_42925674的博客
11-23 423
背景：查了很多博客，都没有靠谱的解决方案，最后审查元素发现问题。
打印html表格边框不显示,解决table边框在打印中不显示的问题 (转)
weixin_36463088的博客
06-21 4229
»先了解一下，table边框如何设置一、只对表格table标签设置边框只对table标签设置border(边框)样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。CSS代码：.table-a table{border:1px solid #F00}HTML代码：站名网址说明web前端开发www.zjgsq.comweb前端学习之路web前端开发www.zjgsq.comweb前端...
element plus el-table 设置border边框 底部边线消失
qq_45706352的博客
07-28 2119
elementplusel-table设置border边框底部边线消失。
vue + element UI Table 表格 利用插槽是 最后一行 操作 的边框线 不显示
estrusKing的博客
08-02 779
在屏幕比例100%时 el-table添加border属性 使用作用域插槽 会不显示某侧的边框线，屏幕比例缩小或放大都展示。
vue+element el-table表头修改背景色 表头内容居中 表单内容居中 表格带有纵向边框
暂时还没想好博客简介
11-18 2725
el-table表头修改背景色 el-table表头修改字体颜色 element表格内容如何居中elementui表头内容如何居中
vue3+element-plus中，element表格组件不显示
weixin_73872257的博客
03-23 1203
2. **条件渲染和列表渲染**：`<template>` 标签经常与 `v-if`、`v-else-if`、`v-else` 或 `v-for` 等指令一起使用，以控制哪些元素应该被渲染到 DOM 中。在上面的例子中，`v-if` 和 `v-for` 都是直接作用在 `<template>` 标签上的，但 `<template>` 本身不会在最终的 DOM 中出现。1. **定义组件的 HTML 结构**：在 Vue 组件中，`<template>` 标签包裹了组件的 HTML 结构。
el-tabel表格去除竖线
Giraffe0615的博客
06-22 3748
el-tabel表格去除竖线
el-table加边框
11-02
el-table加边框需要设置border属性，但是默认情况下只有表头和外边框添加了边框属性，单元格没有纵向边框的显示。如果想要单元格也显示边框，可以通过以下两种方法实现： 方法一：使用CSS样式设置单元格边框 ```css .el-table td, .el-table th { border: 1px solid #dcdfe6; } ``` 方法二：使用element-ui提供的border属性 ```html <el-table :data="tableData" border> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 以上两种方法都可以实现el-table单元格的边框显示，具体选择哪种方法可以根据实际情况进行选择。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

又是江滨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值