vue2+vxe-table的v3版本：设置vxe-table表格border颜色、单元格高度、斑马线条纹颜色、表头背景色和文字样式

模板与样式完整代码

 <vxe-table
        :data="tableData"
        height="auto"
        align="center"
        border
        resizable
        stripe
        round
        row-id="id"
        :row-config="{ isCurrent: true, isHover: true }"
        :scroll-y="{ enabled: true, gt: 10 }"
        :show-overflow="true"
        :sort-config="{ trigger: 'cell' }">
        <vxe-column
          type="seq"
          width="60"
          title="序号"></vxe-column>
        <vxe-column
          field="name"
          title="Name"
          sortable></vxe-column>
        <vxe-column
          field="sex"
          title="Sex"></vxe-column>
        <vxe-column
          field="age"
          title="Age"></vxe-column>
        <vxe-column
          field="address"
          title="Address"
          show-overflow></vxe-column>
      </vxe-table>

<style lang="scss" scoped>
$color: #c0eae7;
:deep(.vxe-table--render-default.border--full) {
    
    
  /* 表格最外层border颜色 */
  .vxe-table--border-line {
    
    
    border: 1px solid $color;
  }

  /* 表头单元格boder颜色，vxe-table是用background-image: linear-gradient来实现的 */
  .vxe-header--column {
    
    
    background-image: linear-gradient($color, $color),
      linear-gradient($color, $color);
    /* 设置单元格高度，需要把padding干掉 */
    height: 32px;
    padding: 0px !important;
    font-size: 12px;
    color: #444444;
    font-weight: bold;
    background-color: #c2efeb;
    
    /* 设置vxe-table的resizable属性为true后，可拖拽列宽，才需要处理下该控件样式 */
    .vxe-resizable {
    
    
      right: -8px;
    }
    .vxe-resizable.is--line:before {
    
    
      background-color: $color;
    }
  }

  /* 去除表头下方的多余的线 */
  .vxe-table--header-wrapper {
    
    
    .vxe-table--header-border-line {
    
    
      border-bottom: 0px;
    }
  }

  /* 表内单元格高度、字体 */
  .vxe-body--column {
    
    
    background-image: linear-gradient($color, $color),
      linear-gradient($color, $color);
    height: 32px;
    padding: 0px !important;
    font-size: 12px;
    color: #444444;
  }

  /* 斑马线条纹颜色，设置vxe-table的stripe属性后才需要 */
  .vxe-body--row.row--stripe {
    
    
    background-color: #f0fffe;
  }
}
</style>