一、el-table
1、HTML
<div class="table"><el-table:data="tableData":cell-class-name="tabCellClassName":row-class-name="tabRowClassName"border><!-- 序号 --><el-table-column type="index" label="序号" width="50"></el-table-column><!-- 表格内容 --><el-table-column v-for="item in tableHead" :key="item.id" :label="item.label" :prop="item.key"></el-table-column></el-table>
</table>
2、Script
<script>
export default {name: "table",components: {},props: {},data() {return {tableHead: [ {id:1,key:"name",label:"姓名"},{id:2,key:"age",label:"年龄"},{id:3,key:"sex",label:"性别"},],tableData: [{name: "张三",age: 18,sex: "男",},],};},computed: {},created() {},mounted() {},methods: {// cell-class-nametabCellClassName({ column, columnIndex }) {column.index = columnIndex + 1;},// row-class-nametabRowClassName({ row, rowIndex }) {row.index = rowIndex + 1;},},
};
</script>
3、Css
.table{width:100%;height:100vh;background-color: rgba(#041a07, 0.7);/deep/ .el-table::before {background: #4caa81;}/deep/ .el-table::after {background: #4caa81;}/deep/ .el-table {width: 100%;height: 100%;background-color: transparent;border-color: #4caa81;display: flex;flex-direction: column;// 表头背景颜色设置& tr {background-color: transparent !important;}// th,td样式设置th,td {text-align: center;border-color: #4caa81;color: #fff;background-color: transparent !important;}.el-table__cell {padding: 5px 0px !important;}.cell {padding: 0px !important;}.el-table__body-wrapper {width: 100%;flex: 1;overflow-y: auto;}}
}
二、vxe-table
1、HTML
<template><div class="VxeTable"><!-- 表格 --><vxe-tableref="xTable":loading="loading"show-overflowshow-header-overflowheight="90%":row-config="{ isHover: true }":data="tableData">><vxe-columnv-for="item in tableHead":key="item.id":field="item.key":title="item.label"></vxe-column><slot></slot></vxe-table><!-- 分页 --><vxe-pagersize="mini":loading="loading":current-page="tablePage.currentPage":page-size="tablePage.pageSize":page-sizes="tablePage.pageSizes":total="tablePage.totalResult":layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'Total']"@page-change="handlePageChange"></vxe-pager></div>
</template>
2、Script
<script>
export default {data() {return {loading: false,tablePage: {currentPage: 1,pageSize: 10,pageSizes: [5, 10, 15, 20],totalResult: 0,},tableHead: [ {id:1,key:"name",label:"姓名"},{id:2,key:"age",label:"年龄"},{id:3,key:"sex",label:"性别"},],tableData: [{name: "张三",age: 18,sex: "男",},],};},props: {},methods: {// 页码改变handlePageChange({ type, pageSize, currentPage }) {console.log(`页码改变，类型：${type}, 页码：${currentPage}, 每页条数：${pageSize}`)},},created() {},mounted() {},
};
</script>
3、Css
<style lang="less" scoped>
.VxeTable {width: 100%;height: 100%;// 表格/deep/ .vxe-table {width: 100%;box-sizing: border-box;.vxe-table--border-line {border-color: #026133;}// 单元格样式.vxe-body--column,.vxe-footer--column,.vxe-header--column {background-image: none !important;border-bottom: 1px solid #026133 !important;color: #fff !important;}// 单元格文本居中.vxe-cell {display: flex;justify-content: center;}// 表头背景颜色.vxe-table--header-wrapper {background-color: #065730 !important;// 表头底部线条.vxe-table--header-border-line {border-bottom: none;}}// 表格内容、底部背景颜色.vxe-table--body-wrapper table,.vxe-table--footer-wrapper table {background-color: transparent !important;}.vxe-header--gutter {background-image: linear-gradient(#065730, #065730) !important;}// 行hover样式.vxe-body--row.row--hover {background: #06322d !important;}}// 分页/deep/ .vxe-pager {background-color: transparent !important;width: 100%;height: 10%;text-align: center;color: #fff !important;// 自定义样式.vxe-pager--prev-btn,.vxe-pager--num-btn,.vxe-pager--next-btn,.vxe-input--inner {background-color: transparent !important;border: 1px solid #026133;color: #fff !important;}// vxe-select获取焦点时边框颜色.vxe-input:not(.is--disabled).is--active .vxe-input--inner {border: 1px solid #026133;}// 上一页，下一页禁用时样式.vxe-pager--prev-btn.is--disabled,.vxe-pager--next-btn.is--disabled {background-color: #69706c !important;border-color: #69706c !important;color: #999 !important;}// 上一页、下一页、页码选中时样式.vxe-pager--prev-btn:not(.is--disabled):focus,.vxe-pager--num-btn:not(.is--disabled):focus,.vxe-pager--next-btn:not(.is--disabled):focus {box-shadow: none;}// 当前页码选中时样式.vxe-pager--num-btn.is--active {background-color: #026133 !important;}}
}
</style>
