模板與樣式完整代碼

 <vxe-table:data="tableData"height="auto"align="center"borderresizablestriperoundrow-id="id":row-config="{ isCurrent: true, isHover: true }":scroll-y="{ enabled: true, gt: 10 }":show-overflow="true":sort-config="{ trigger: 'cell' }"><vxe-columntype="seq"width="60"title="序號"></vxe-column><vxe-columnfield="name"title="Name"sortable></vxe-column><vxe-columnfield="sex"title="Sex"></vxe-column><vxe-columnfield="age"title="Age"></vxe-column><vxe-columnfield="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>