Element 表格修改边框颜色

2021年10月21日 107次阅读 来源: 阳光的男夹克

实现效果 设置表格边框需要分三个部分设置 即头部 单元格以及最外层边框
《Element 表格修改边框颜色》
头部 设置 使用 :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>
    原文作者：阳光的男夹克
    原文地址: https://blog.csdn.net/weixin_44640323/article/details/109111603
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞