Element 表格修改边框颜色_element table 边框颜色

实现效果 设置表格边框需要分三个部分设置 即头部 单元格以及最外层边框

头部 设置 使用 :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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

设置单元格使用 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'
            },
        }
1
2
3
4
5
6

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

<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>
1
2
3
4
5
6
7
8