element-ui table的边框颜色改变

01. 结构

<template>
  <el-table :cell-style="tableCellStyle" :header-cell-style="tableHeaderCellStyle" cell-class-name="cell-class-name" :data="tableData" border>
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>

02. 逻辑数据

import { ElTable, ElTableColumn } from 'element-plus'
export default {
  components: { ElTable, ElTableColumn },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  methods: {
    // 修改 table cell边框的背景色
    tableCellStyle() {
      return 'border-color: #000;'
    },
    // 修改 table header cell的背景色
    tableHeaderCellStyle() {
      return 'border-color: #000; color: #000;'
    }
  }
}

03. css样式

<style lang='less'>
  .cell-class-name {
    border-color: #000;
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #000 !important;
  }
  .el-table--border,
  .el-table--group {
    border-color: #000 !important;
  }
</style>