el-table给列加单位,表头加样式,加斑马纹

news/2024/9/25 14:07:34/
javascript"><el-table 
ref="table" 
class="dataTable" 
:data="detailList"  
:header-cell-style="tableHeaderColor" 
:row-class-name="tableRowClassName"
highlight-current-row><el-table-column label="序号" align="center" min-width="40px"><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column><el-table-column prop="sum" label="总金额" min-width="80px"><template slot-scope="scope">{{ scope.row.money}}元</template></el-table-column>
</el-table>methods:{tableRowClassName({ rowIndex }) {if (rowIndex % 2 === 0) {return "striped-row";}return "";},tableHeaderColor() {return { background: "#4D76FF  !important", color: "#FFFFFF  !important", border: 0, fontSize: "14px" };},
}<style>
/deep/ .el-table .striped-row {background-color: #f7f9ff !important;
}
</style>

 

想给列加单位:<template slot-scope="scope">{{ scope.row.money}}</template>

想给表头加样式::header-cell-style="tableHeaderColor"

想给table加斑马纹::row-class-name="tableRowClassName"


http://www.ppmy.cn/news/1530316.html

相关文章

去中心化的力量:探索Web3的分布式网络

Web3作为一种新兴的网络架构&#xff0c;代表了对互联网发展的一种探索。与传统的中心化互联网模式相比&#xff0c;Web3致力于通过去中心化的方式构建更加开放和透明的数字世界。本文将探讨Web3的核心理念、技术实现及其潜在应用。 一、去中心化的核心理念 Web3的去中心化理…

【IDEA】tomcat中war exploded加载慢

参考:Tomcat部署时war和war exploded区别以及平时踩得坑 参考:Tomcat启动war包卡死 启动慢 idea配置tomcat中war和war exploded的区别 虽然做了以下配置,但是感觉效果不太明显 [2024-09-25 11:47:59,212] 工件 ahb-service:war exploded: 正在部署工件,请稍候… [2024-09-…

Spring MVC 拦截器总结

1.简介 Spring MVC提供了拦截器方便在接口调用前后进行一些通用处理。 2.步骤 1.实现一个拦截器类&#xff0c;共有三处拦截时机&#xff1a; public class Interceptor1 implements HandlerInterceptor {//实现HandlerInterceptor接口//执行handler之前调用//编码格式处理…

C++20-协程

昨天看到一本书&#xff0c;《现代C语言核心特性解析》&#xff0c;第33章是协程&#xff0c;我机器上安装了vs2022,肯定是支持的&#xff0c;直接运行第一个例子就报错了。 #include <iostream> #include <chrono> #include <future>using namespace std::…

redis常见类型设置、获取键值的基础命令

redis常见类型设置、获取键值的基础命令 获取键值的数据类型 命令&#xff1a;TYPE keyname 常见数据类型设置、获取键值的基本命令 string类型 置键值&#xff1a;set keyname valuename获取键值&#xff1a;get keyname删除&#xff1a; del keyname list类型 从左边向列表…

基于Spring Boot的宠物咖啡馆平台【附源码】

基于Spring Boot的宠物咖啡馆平台&#xff08;源码L文说明文档&#xff09; 目录 4 系统设计 4.1 系统概述 4.2系统结构 4.3.数据库设计 4.3.1数据库实体 4.3.2数据库设计表 5系统详细实现 5.1 管理员模块的实现 5.1.1 用户信息管理 …

charles抓包flutter

一&#xff0c;准备工作 在我的另一篇文章flutter Dio发送post请求-CSDN博客里面&#xff0c;直接复用一部分代码 该方法无需让手机安装charles的ca证书&#xff08;当然安装了也没事儿&#xff09;&#xff0c;也无需设置手机wifi的网络代理&#xff08;因为ca证书的内容和网…

移动学习平台的设计与实现+ssm论文源码调试讲解

第2章 开发环境与技术 基于微信小程序的移动学习平台的编码实现需要搭建一定的环境和使用相应的技术&#xff0c;接下来的内容就是对基于微信小程序的移动学习平台用到的技术和工具进行介绍。 2.1 MYSQL数据库 本课题所开发的应用程序在数据操作方面是不可预知的&#xff0c;…