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

news/2024/9/28 13:33:29 标签: vue.js, elementui, javascript
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.niftyadmin.cn/n/5681186.html

相关文章

git 基本原理

文章内容来源于视频 举个案例&#xff0c;家族里面有一本记载祖传秘籍的菊花宝典&#xff0c;这本菊花宝典的正本存储在家族祠堂里面&#xff0c;每一个家庭从正本复制一本存在自己家中&#xff0c;称为副本。这个过程称为clone 一个家庭需要再菊花宝典中添加技能&#xff0c…

Django 配置邮箱服务,实现发送信息到指定邮箱

一、这里以qq邮箱为例&#xff0c;打开qq邮箱的SMTP服务 二、django项目目录设置setting.py 文件 setting.py 添加如下内容&#xff1a; # 发送邮件相关配置 EMAIL_BACKEND django.core.mail.backends.smtp.EmailBackend EMAIL_USE_TLS True EMAIL_HOST smtp.qq.com EMAIL…

Vue 技术入门 day1 模版语法、数据绑定、事件处理、计算属性与监视、class和style绑定、条件渲染v-if/v-show、列表渲染v-for

目录 1.Vue 核心 1.1. Vue 简介 1.1.1 介绍与描述 1.1.2 Vue 的特点 1.2 模板语法 1.2.1 模板的分类 1.2.2 插值语法 1.2.3 指令语法 1.2.4 实例 1.3 数据绑定 1.3.1 单向数据绑定 1.3.2 双向数据绑定 1.3.3 MVVM 模型 1.3.4 data与el的2种写法 1.3.5 实例 1.3.…

HTML基础用法介绍一

VS code 如何快速生成HTML骨架注释是什么&#xff1f;为什么要写注释&#xff1f;注释的标签是什么&#xff1f;标题标签段落标签换行标签与水平线标签 (都是单标签&#xff09;文本格式化标签图片标签超链接标签音频标签视频标签 &#x1f698;正片开始 VS code 如何快速生成…

Paddlets时间序列集成模型回测实战:MLPRegressor、NHiTSModel与RNNBlockRegressor

好的,我们继续深入理解代码的每个部分。以下是每个主要模块的详细解释: 1. 导入模块和库 import json import os import glob import pandas as pd from tqdm import tqdm from paddlets.datasets import TSDataset from paddlets.transform import StandardScaler from pa…

C语言开发基础新手快速入门及精通系列学习教程(系统性完整C语言学习笔记整理)

关注我&#xff0c;一起学编程 前言 作为一名拥有多年开发经验的码农&#xff0c;我的职业生涯涵盖了多种编程语言&#xff0c;包括 C 语言、C、C# 和 JavaScript。在这一过程中&#xff0c;我深刻地意识到扎实的基础对于编程学习的重要性&#xff0c;尤其是对于 C 语言…

0x09 瑞友 应用虚拟化系统 GetBSAppUrl SQL注入漏洞 - 复现

参考:瑞友 应用虚拟化系统 GetBSAppUrl SQL注入漏洞 | PeiQi文库 (wgpsec.org) 漏洞描述 瑞友应用虚拟化系统中的 GetBSAppUrl 方法存在 SQL注入漏洞。由于请求参数未经过滤,攻击者可以利用此漏洞执行恶意SQL查询,从而获取数据库中的敏感信息。 漏洞影响 受影响版本:瑞友…

【it】软件领域发展的终极愿景——万物皆智能,万事皆自动

无论是发明东西&#xff0c;还是设计程序&#xff0c;我编了一个终极目标“万物皆智能&#xff0c;万事皆自动”&#xff0c;虽然现在很难实现&#xff0c;但我相信&#xff0c;有着无数人的共同努力&#xff0c;我们都可以达到这样的生活。 我认为这个愿景非常宏伟且充满前瞻性…