element table下边线消失,以及左右边框不对齐

今天用element做表格的时候,碰见两个样式问题。问题如下图:在这里插入图片描述
在这里插入图片描述
问题
1、表格的下边线莫名其妙的消失了,之前也有做过,并未出现类似情况。
2、表格左右边框不对齐
解决
问题一:

<style>
// 表头的下边线添加
.el-table th.is-leaf, .el-table td {
      border-bottom: 1px solid #EBEEF5;
    }
// 表内容的下边线添加
.el-table td, .el-table th.is-leaf {
      border-bottom: 1px solid #EBEEF5;
}
</style>

如果项目样式是局部样式scoped的话,加个 /deep/ 穿透就好啦,如下

<style scoped>
// 表头的下边线添加
/deep/ .el-table th.is-leaf, .el-table td {
      border-bottom: 1px solid #EBEEF5;
}
// 表内容的下边线添加
/deep/ .el-table td, .el-table th.is-leaf {
      border-bottom: 1px solid #EBEEF5;
}
</style>

问题二:

<style>
.el-table th.gutter {
      display: table-cell !important;
}
</style>

解决,效果图:
在这里插入图片描述
以上,就是今天的问题及解决,加油!

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element 的 `el-table` 中,如果您需要给某一列的数据设置靠右对齐,可以通过以下两种方式实现: 1. 使用 `slot-scope` 自定义列模板 您可以使用 `slot-scope` 属性来自定义列模板,然后在模板中设置对应的样式。例如: ```html <el-table :data="tableData"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"> <template slot-scope="{row}"> <div style="text-align: right;">{{ row.age }}</div> </template> </el-table-column> <el-table-column label="地址" prop="address"></el-table-column> </el-table> ``` 在上面的示例中,我们给第二列的模板添加了一个 `div` 容器,并设置了 `text-align: right` 样式,从而实现了靠右对齐的效果。 2. 使用 `formatter` 属性 您也可以使用 `formatter` 属性来格式化列中的数据,然后在格式化函数中设置对应的样式。例如: ```html <el-table :data="tableData"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age" :formatter="formatAge"></el-table-column> <el-table-column label="地址" prop="address"></el-table-column> </el-table> ``` ```javascript methods: { formatAge(row, column, cellValue) { return `<div style="text-align: right;">${cellValue}</div>`; } } ``` 在上面的示例中,我们定义了一个 `formatAge` 方法来格式化第二列的数据,然后在方法中返回一个包含对应样式的 `div` 元素。这样就可以实现靠右对齐的效果了。需要注意的是,这种方式会将整个单元格的内容包裹在一个 `div` 元素中,可能会影响单元格的高度和边框等样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值