如何修改边框颜色

[wangyu-2024]

（必填）这个需求解决了什么问题： 初次使用vxe table组件 想知道是否有办法修改边框颜色

截图或在线链接： https://codesandbox.io/s/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-pngkv

建议的 API 是什么样的： 修改边框颜色的方法

是否已有其他不错的替代方案： ？

[jingyuLin1999]

可以用伪类覆盖边框,或达到修改整个表的样式。

  <vxe-table
    align="center"
    height="800px"
    :data="Data"
    class="vxe-my-style-table"
  ></vxe-table>

/* 表单部分 */
.vxe-my-style-table {
  border: 0;
  font-size: 23px;
  position: relative;
  /* 修改vxe表格样式 */
  .vxe-table--header-wrapper {
    color: #a9d18e;
    .vxe-table--header {
      background: #0d47a1;
      .vxe-header--row > .vxe-header--column {
        text-align: center;
        position: relative;
      }
      .vxe-header--row > .vxe-header--column::after {
        content: "";
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0px;
        height: 1px;
        background: #0d47a1;
        z-index: 999;
      }
    }
  }
  .vxe-table--body-wrapper {
    color: #b4c7e7;
    .vxe-body--row > .vxe-body--column {
      text-align: center;
      position: relative;
    }
    .vxe-body--row > .vxe-body--column::after {
      content: "";
      position: absolute;
      width: 100%;
      left: 0;
      bottom: -1px;
      height: 1px;
      background: #0d47a1;
      z-index: 999;
    }
    .vxe-body--row:nth-child(odd) {
      background: #1850a8;
    }
    .vxe-body--row:nth-child(even) {
      background: #0d47a1;
    }
  }
  /* 修改table滚动条样式 */
  .vxe-table--body-wrapper::-webkit-scrollbar {
    width: 3px;
  }
  .vxe-table--body-wrapper::-webkit-scrollbar-track {
    background: #0d47a1;
    border-radius: 2px;
  }
  .vxe-table--body-wrapper::-webkit-scrollbar-thumb {
    background: #0d47a1;
    border-radius: 10px;
  }
  .vxe-table--body-wrapper::-webkit-scrollbar-thumb:hover {
    background: #333;
  }
  .vxe-table--body-wrapper::-webkit-scrollbar-corner {
    background: #179a16;
  }
}
.vxe-my-style-table::before {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0px;
  height: 1px;
  background: #0d47a1;
}
.vxe-my-style-table::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0px;
  height: 1px;
  background: #0d47a1;
}