Vue项目中使用element-plus的el-table组件-组件使用-样式修改

项目配置

<div class="table-wrap"><el-tableclass="table-card-container":data="tableData"style="width: 100%"><template v-for="column in tableColumn"><el-table-columnv-if="column.isShow":key="column.prop":prop="column.prop":label="column.label":fixed="column.fixed":width="column.width":align="column.align"><!-- :label="column.label" --><!-- <template #header></template> --><template #default="scope"><!-- <div v-if="column.label == '币种'" class="bz-icon"><img :src="getIcon(scope.row.bz)" />{{ scope.row.bz }}</div><div v-if="column.label == '价格(24h%)'"><span:class="{'long-color': +scope.row.jg24 >= 0,'short-color': +scope.row.jg24 < 0}">{{ formatValue(scope.row.jg24, 'zfb') }}</span></div> --></template></el-table-column></template></el-table></div>

const tableColumn = ref([{label: '排名',prop: 'pm',fixed: false,width: 80,isShow: true,align: 'center'},{label: '平台',prop: 'pt',fixed: false,width: 120,isShow: true,align: 'left'},{label: '持仓量',prop: 'ccl',fixed: false,width: 130,isShow: true,align: 'left'},{label: '持仓额',prop: 'cce',fixed: false,width: 130,isShow: true,align: 'left'},{label: '占比',prop: 'zb',fixed: false,width: 120,isShow: true,align: 'left'},{label: '持仓变化(1小时)',prop: 'ccbh1',fixed: false,width: 160,isShow: true,align: 'left'},{label: '持仓变化(4小时)',prop: 'ccbh4',fixed: false,width: 160,isShow: true,align: 'left'},{label: '持仓变化(24小时)',prop: 'ccbh24',fixed: false,width: 160,isShow: true,align: 'left'},{label: '持仓/24小时成交量',prop: 'cc24cjl',fixed: false,width: 160,isShow: true,align: 'right'}
]);
const tableData = [{pt: 'BTC',pm: '1',ccl: '123.32BTC',cce: '$131.32亿',zb: '1',ccbh1: '0.0032',ccbh4: '0.002',ccbh24: '0.0649',cc24cjl: '0.243243'}
];

样式重置修改文件

.table-card-container {@gray-bg: #080514;// --el-table-border: none;--el-table-border-color:#252525;--el-table-row-hover-bg-color:@gray-bg;
--el-fill-color-blank: @gray-bg;:deep(.el-table__header) {.el-table__cell {padding: 0;height: 50px;background: @gray-bg;font-family: PingFang SC;font-size: 14px;font-weight: 400;color: #868E9B;// &.ascending {//   .caret-wrapper {//     .sort-caret.ascending {//       border-bottom-color: #0ECB81;//     }//   }// }// &.descending {//   .caret-wrapper {//     .sort-caret.descending {//       border-top-color: #0ECB81;//     }//   }// }}}:deep(.el-table__body) {//   .el-table__row:nth-child(2n) {//     background: @gray-bg;//   }// .el-table__body{//   background: @gray-bg;// }.el-table__row {padding: 0;height: 60px;font-family: DIN,DIN-Medium, arial, sans-serif;font-size: 14px;color: #FFFFFF;--el-table-tr-bg-color: @gray-bg;.el-table__cell{--el-bg-color: @gray-bg;}}// .hover-row{//   --el-table-row-hover-bg-color:@gray-bg;// }}:deep(.el-table__body-wrapper) {background-color: @gray-bg;}:deep(.el-pagination) {--el-pagination-bg-color: #fff;--el-pagination-button-disabled-bg-color: transparent;--el-pagination-button-disabled-color: #868E9B;--el-pagination-hover-color: #0ECB81;--el-pagination-button-color: #868E9B;--el-pagination-font-size: 14px;font-family: DIN-Medium, arial, sans-serif;margin-top: 50px;justify-content: center;.btn-prev .el-icon,.btn-next .el-icon {font-size: 15px;}.el-pager {.number {margin: 0 8px}.is-active {background: #0ECB81;color: #fff;}}}}

---

单元格背景填充 

代码

<template><div class="TableList"><div class="title"><h1>数字货币合约爆仓图表</h1><div class="title-right"><el-input class="search-input" v-model="searchText" placeholder="搜索"><template #prefix><img src="@/assets/images/prices/search.svg" /></template></el-input></div></div><div class="table-wrap"><el-tableclass="table-card-container":data="tableData"style="width: 100%"><template v-for="column in tableColumn"><el-table-columnv-if="column.isShow":key="column.prop":prop="column.prop":label="column.label":fixed="column.fixed":width="column.width":align="column.align"><!-- :label="column.label" --><!-- <template #header></template> --><template #default="scope"><div v-if="column.label == '排名'" class="label-icon"><span>{{ scope.$index + 1 }}</span></div><div v-if="column.label == '币种'" class="label-icon"><img :src="getIcon(scope.row.bz)" /><span>{{ scope.row.bz }}</span></div><div v-if="column.label == '价格(24h%)'"><span:class="{'long-color': +scope.row.jg24 >= 0,'short-color': +scope.row.jg24 < 0}">{{ formatValue(scope.row.jg24, 'zfb') }}</span></div><divv-if="column.label == '1小时多单爆仓'"class="label-lty":class="{'long-bg-color': +scope.row.ddbc1s == 0,'short-bg-color': +scope.row.ddbc1s == 1}"><span>{{ scope.row.ddbc1 }}</span></div><divv-if="column.label == '1小时空单爆仓'"class="label-lty":class="{'long-bg-color': +scope.row.kdbc1s == 0,'short-bg-color': +scope.row.kdbc1s == 1}"><span>{{ scope.row.kdbc1 }}</span></div><divv-if="column.label == '4小时多单爆仓'"class="label-lty":class="{'long-bg-color': +scope.row.ddbc4s == 0,'short-bg-color': +scope.row.ddbc4s == 1}"><span>{{ scope.row.ddbc4 }}</span></div><divv-if="column.label == '4小时空单爆仓'"class="label-lty":class="{'long-bg-color': +scope.row.kdbc4s == 0,'short-bg-color': +scope.row.kdbc4s == 1}"><span>{{ scope.row.kdbc4 }}</span></div><divv-if="column.label == '24小时多单爆仓'"class="label-lty":class="{'long-bg-color': +scope.row.ddbc24s == 0,'short-bg-color': +scope.row.ddbc24s == 1}"><span>{{ scope.row.ddbc24 }}</span></div><divv-if="column.label == '24小时空单爆仓'"class="label-lty":class="{'long-bg-color': +scope.row.kdbc24s == 0,'short-bg-color': +scope.row.kdbc24s == 1}"><span>{{ scope.row.kdbc24 }}</span></div></template></el-table-column></template></el-table><div class="pagination"><ElPaginationv-model:current-page="page":page-size="pageSize":total="allTotalCount"layout="prev, pager, next"hide-on-single-page@current-change="onCurrentChange"/></div></div></div>
</template><script setup>
import { ref } from 'vue';
import {getIcon,getExchangeIcon,formatValue
} from '@/views/Prices/Hooks/useUtils.js';
const searchText = ref('');
const allTotalCount = ref(100);
const pageSize = ref(10);
const page = ref(1);
const onCurrentChange = (pageIdx) => {page.value = pageIdx;
};
const tableColumn = ref([{label: '排名',prop: 'pm',fixed: false,width: 70,isShow: true,align: 'left'},{label: '币种',prop: 'bz',fixed: false,width: 128,isShow: true,align: 'center'},{label: '价格',prop: 'jg',fixed: false,width: 120,isShow: true,align: 'left'},{label: '价格(24h%)',prop: 'jg24',fixed: false,width: 120,isShow: true,align: 'center'},{label: '1小时多单爆仓',prop: 'ddbc1',fixed: false,width: 130,isShow: true,align: 'center'},{label: '1小时空单爆仓',prop: 'kdbc1',fixed: false,width: 130,isShow: true,align: 'center'},{label: '4小时多单爆仓',prop: 'ddbc4',fixed: false,width: 130,isShow: true,align: 'center'},{label: '4小时空单爆仓',prop: 'kdbc4',fixed: false,width: 130,isShow: true,align: 'center'},{label: '24小时多单爆仓',prop: 'ddbc24',fixed: false,width: 130,isShow: true,align: 'center'},{label: '24小时空单爆仓',prop: 'kdbc24',fixed: false,width: 130,isShow: true,align: 'center'}
]);
const tableData = [{bz: 'ddd',jg: '$2342.1',jg24: '0.0023',ddbc1: '$2342.1万',ddbc1s: '1',kdbc1: '$2342.1万',kdbc1s: '0',ddbc4: '$2342.1万',ddbc4s: '0',kdbc4: '$2342.1万',kdbc4s: '1',ddbc24: '$2342.1万',ddbc24s: '1',kdbc24: '$2342.1万',kdbc24s: '1'},{bz: 'ddd',jg: '$2342.1',jg24: '0.0023',ddbc1: '$2342.1万',ddbc1s: '0',kdbc1: '$2342.1万',kdbc1s: '1',ddbc4: '$2342.1万',ddbc4s: '0',kdbc4: '$2342.1万',kdbc4s: '0',ddbc24: '$2342.1万',ddbc24s: '1',kdbc24: '$2342.1万',kdbc24s: '0'}
];
</script><style lang="less" scoped>
@import '../tableStyle2';
.TableList {.title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 50px;h1 {color: #fff;font-family: PingFang SC;font-size: 24px;font-weight: 600;}.title-right {display: flex;.search-input {width: 225px;height: 40px;border-radius: 4px;border: 1px solid #404040;// margin-right: 15px;background: #121212;:deep(.el-input__inner) {color: #fff;}}}}.table-wrap {.table-card-container {:deep(.el-table__header) {.el-table__cell {.cell {padding: 0 4px;}}}:deep(.el-table__body) {.el-table__cell {.cell {padding: 0 4px;}}}}.label-icon {color: #fff;font-family: DIN;font-size: 14px;img {width: 16px;height: 16px;margin-right: 5px;vertical-align: text-top;}}.label-lty {height: 60px;line-height: 60px;}--table-bg-Short1: rgba(226, 98, 109, 0.2);--table-bg-Long1: rgba(14, 203, 129, 0.2);.long-bg-color {background: var(--table-bg-Long1);}.short-bg-color {background: var(--table-bg-Short1);}.pagination {padding-top: 30px;padding-bottom: 50px;}}
}
</style>

样式重置修改

.table-card-container {@gray-bg: transparent;//#18191e;// --el-table-border: none;--el-table-border-color: #252525;--el-table-row-hover-bg-color: @gray-bg;--el-fill-color-blank: @gray-bg;:deep(.el-table__header) {.el-table__cell {padding: 0;height: 50px;background: @gray-bg;font-family: PingFang SC;font-size: 14px;font-weight: 400;color: #868e9b;// &.ascending {//   .caret-wrapper {//     .sort-caret.ascending {//       border-bottom-color: #0ECB81;//     }//   }// }// &.descending {//   .caret-wrapper {//     .sort-caret.descending {//       border-top-color: #0ECB81;//     }//   }// }}}:deep(.el-table__body) {//   .el-table__row:nth-child(2n) {//     background: @gray-bg;//   }// .el-table__body{//   background: @gray-bg;// }.el-table__row {padding: 0;height: 60px;font-family: DIN,DIN-Medium, arial, sans-serif;font-size: 14px;color: #FFFFFF;--el-table-tr-bg-color: @gray-bg;.el-table__cell{padding: 0;--el-bg-color: @gray-bg;}}// .hover-row{//   --el-table-row-hover-bg-color:@gray-bg;// }}:deep(.el-table__body-wrapper) {background-color: @gray-bg;}:deep(.el-pagination) {--el-pagination-bg-color: #fff;--el-pagination-button-disabled-bg-color: transparent;--el-pagination-button-disabled-color: #868E9B;--el-pagination-hover-color: #0ECB81;--el-pagination-button-color: #868E9B;--el-pagination-font-size: 14px;font-family: DIN-Medium, arial, sans-serif;margin-top: 50px;justify-content: center;.btn-prev .el-icon,.btn-next .el-icon {font-size: 15px;}.el-pager {.number {margin: 0 8px}.is-active {background: #0ECB81;color: #fff;}}}}