当前位置: 首页 > news >正文

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

相关文章:

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&qu…...

JavaBean字符串训练(支票大写)

package 字符串练习;import java.util.Scanner;public class 人名币训练 {public static void main(String[] args) {/* 需求: 用户输入一个数字,改成发票那样的展示出来例子: 4321 -> 零佰零拾零万肆千叁佰贰拾壹元共七位(固定)*///思路: 1. 把用户读入的数字改写成大写,并…...

Java 核心技术卷 I —— 第2章 Java 编程环境

文章目录 2.1 安装 Java 开发工具包&#xff08;*&#xff09;2.2 使用命令行工具2.3 使用集成开发环境&#xff08;*&#xff09;2.4 JShell 2.1 安装 Java 开发工具包&#xff08;*&#xff09; 2.2 使用命令行工具 ​ 打开终端窗口&#xff0c;进入 Java 的 bin 目录&…...

外汇天眼:英国FCA引入新规定,强化金融广告审核标准!

英国金融行为监管局&#xff08;FCA&#xff09;为帮助人们做出明智的储蓄、投资和借贷决策&#xff0c;将引入新的筛选检查措施&#xff0c;针对那些批准金融广告的公司。 批准非受监管公司的金融营销的公司必须证明他们具备批准广告所需的技能和专业知识。那些签署广告批准的…...

【python】Seaborn画热力图,只显示第一行数字---seaborn与matplotlib版本问题

github上有这个讨论&#xff1a;Heatmap only has annotation text in the top row only Issue #3478 mwaskom/seaborn (github.com)翻译过来就是&#xff1a;热图仅在最上面一行有注释文本&#xff1b; 原因就是matplotlib 在2023年9月更新到了 3.8.0版本&#xff0c;改变了…...

VMware CentOS7 Docker入门

一、安装centos 1.引导安装 创建新的虚拟机-> 典型安装-> 安装程序光盘映像-> 命名虚拟机&#xff08;centos7.9,位置存放F:\Virtual Machines\CentOS 7.9&#xff09;-> 20GB,将虚拟磁盘存储为单个文件-> 自定义硬件4gb 4核-> NAT-> 2.启动安装 安装位置…...

C++ Primer 第5章 语句

C Primer 第5章 语句 5.1 简单语句一、空语句二、别漏写分号&#xff0c;也别多写分号三、复合语句&#xff08;块&#xff09; 5.2 语句作用域5.3 条件语句5.3.1 if语句一、使用if else语句二、嵌套if语句三、注意使用花括号四、悬垂else五、使用花括号控制执行路径 5.3.2 swi…...

【C++】bitset位图的简单模拟实现及常见面试题

文章目录 前言一、 bitset模拟实现二、 常见面试题1.给你一百亿个整数&#xff0c;找到只出现一次的数字2. 给两个文件&#xff0c;分别有100亿个整数&#xff0c;我们只有1G内存&#xff0c;如何找到两个文件交集&#xff1f; 前言 快速查找某个数据是否在一个集合中排序 去重…...

十六、MySql的MVCC机制CONNECT(收官!)

文章目录 一、数据库并发的场景有三种&#xff1a;二、读-写&#xff08;一&#xff09;3个记录隐藏列字段&#xff08;二&#xff09;undo 日志&#xff08;三&#xff09;模拟 MVCC&#xff08;四&#xff09;一些思考&#xff08;五&#xff09;Read View 一、数据库并发的场…...

194、SpringBoot -- 下载和安装 Erlang 、 RabbitMQ

本节要点&#xff1a; 一些命令&#xff1a; 小黑窗输入&#xff1a; rabbitmq-plugins enable rabbitmq_management 启动控制台插件 rabbitmq-server 启动rabbitMQ服务器 管理员启动小黑窗&#xff1a; rabbitmq-service install 添加rabbitMQ为本地服务 启动浏览器访问 ht…...

Linux0.11——第二回 从0x7c00到0x90000

上一讲&#xff0c;讲了CPU执行操作系统的最开始的两行代码&#xff1a; mov ax, 0x07c0 mov ds, ax这两行代码将数据段寄存器 ds 的值变成了 0x07c0&#xff0c;方便之后访问内存时&#xff0c;利用这个段基址进行寻址。 接下来的代码&#xff1a; mov ax,0x9000 mov es,ax…...

封装了一个中间放大效果的iOS轮播视图

效果图 计算逻辑 设定在中间展示的size&#xff0c;即正常size&#xff0c;然后设置水平和竖直方向上的margin, 在view的origin和scrollView的contentoffset相等的时候&#xff0c;即 视图处在正中间的时候&#xff0c;最大&#xff0c;然后通过计算其他视图的origin和scrollV…...

趣解设计模式之《小王的糖果售卖机》

〇、小故事 小王最近一直在寻找商机&#xff0c;他发现商场儿童乐园或者中小学校周围&#xff0c;会有很多小朋友喜欢吃糖果&#xff0c;那么他想设计一款糖果售卖机&#xff0c;让后将这些糖果售卖机布置到商场和学校旁边&#xff0c;这样就能获得源源不断的收益了。 想到这里…...

Redis 哨兵模式模式搭建教程

一、介绍 本文实战搭建一主两从三哨兵&#xff0c;通过使用哨兵模式&#xff0c;可以有效避免某台服务器的 Redis 挂掉出现的不可用问题&#xff0c;保障系统的高可用。 本文通过虚拟机搭建的三台 Centos7 服务器进行测试&#xff0c;使用的 Redis 版本为 6.25。 二、准备环…...

41. Linux系统配置FTP服务器并在QT中使用QFtp实现文件上传

1. 说明 这篇博客主要记录一些在Linux系统中搭建FTP服务器时踩过的一些坑,以及在使用QFtp上传文件时需要注意的问题。 2. FTP环境搭建 在linux系统中,需要安装vsftpd,可以在终端中输入下面的命令进行安装: sudo apt-get install vsftpd使用上述命令安装后,系统中会有一…...

【新版】系统架构设计师 - 案例分析 - 架构设计<架构风格和质量属性>

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录 架构 - 案例分析 - 架构设计&#xff1c;架构风格和质量属性&#xff1e;例题1例题2例题3例题4例题5例题6 架构 - 案例分析 - 架构设计&#xff1c;架构风格和质量属性&#xff1e; 例题1 某软件公司为…...

C++ - 红黑树 介绍 和 实现

前言 前面 学习了 AVL树&#xff0c;AVL树虽然在 查找方面始终拥有 O(log N &#xff09;的极高效率&#xff0c;但是&#xff0c;AVL 树在插入 ,删除等等 修改的操作当中非常的麻烦&#xff0c;尤其是 删除操作&#xff0c;在实现当中细节非常多&#xff0c;在实现上非常难掌控…...

【蓝桥杯选拔赛真题62】Scratch判断小球 少儿编程scratch图形化编程 蓝桥杯选拔赛真题解析

目录 scratch判断小球 一、题目要求 编程实现 二、案例分析 1、角色分析...

Spring面试题15:Spring支持几种bean的作用域?singleton、prototype、request的区别是什么?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:Spring支持几种bean的作用域? Spring支持以下几种Bean的作用域: Singleton(单例):这是Spring默认的作用域。使用@Scope(“singleton”)注解或…...

Spring Boot中Tomcat服务器参数解析及高并发控制

Spring Boot中Tomcat服务器参数解析及高并发控制 Spring Boot 集成了多种服务器&#xff0c;默认使用了Tomcat 服务器。在高并发情况下&#xff0c;合理地配置 Tomcat 服务器参数对于控制请求量和提高系统的稳定性至关重要。本文将解释 Spring Boot 中涉及 Tomcat 服务器的一些…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...