模板与样式完整代码

 <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>