Element 表格修改边框颜色

最新推荐文章于 2024-09-05 11:06:16 发布

阳光的男夹克

最新推荐文章于 2024-09-05 11:06:16 发布

阅读量8.4k

点赞数 8

分类专栏： Element

本文链接：https://blog.csdn.net/weixin_44640323/article/details/109111603

版权

Element 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

本文介绍了如何在前端开发中，使用Element UI库为表格设置头部、单元格和最外层边框的详细步骤。通过配置`header-cell-style`属性实现头部边框，使用`cell-style`方法设置单元格样式，并通过自定义`<style scoped>`标签添加外部边框颜色。这些方法可以帮助开发者精确控制表格的视觉呈现。

摘要由CSDN通过智能技术生成

实现效果设置表格边框需要分三个部分设置即头部单元格以及最外层边框
在这里插入图片描述
头部设置使用 :header-cell-style="{color:‘black’,borderColor:‘black’}" 以及 size=“small” 并添加方法:cell-style=“cellStyle”

<el-table border
                      size="small"
                      :data="tableData"
                      :cell-style="cellStyle"
                      height="100%"
                      :highlight-current-row="true"
                      :header-cell-style="{color:'black',borderColor:'black'}"
                      style="margin-top:10px;">
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        align="center">
                </el-table-column>
            </el-table>

设置单元格使用 cell-style 方法

methods: {
            //设置单元格背景
            cellStyle({row, column, rowIndex, columnIndex}) {
                return 'height:35px!important; border-color:black!important; color:#000000!important; padding:0px!important; height:40px!important'
            },
        }

设置最外部只需要添加样式

<style scoped>
    .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
        border-color: black;
    }
    .el-table--border::after, .el-table--group::after, .el-table::before{
        background-color: black;
    }
</style>