Element 表格修改边框颜色

今天药忘吃喽~ 2022-12-15 11:17 1086阅读 0赞

实现效果 设置表格边框需要分三个部分设置 即头部 单元格以及最外层边框  
![在这里插入图片描述][20201016102830289.png_pic_center]  
头部 设置 使用 :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'
                },
            }

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

[20201016102830289.png_pic_center]: /images/20221123/b20f5ca6f311431ab4dd8a0b4672fdb4.png