程序员经验分享-hwhale

el-table添加行/单元格样式

2023-11-18

一、官方文档释义

1.row-style/cell-style

行/单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有行/单元格设置一样的 Style。参数类型：Function({row, rowIndex})/Object

2.row-class-name/cell-class-name

行/单元格的 className 的回调方法，也可以使用字符串为所有行/单元格设置一个固定的 className。参数类型：Function({row, column, rowIndex, columnIndex})/Object

二、row-style/cell-style的使用

1.row-style

使用Object

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :row-style="{'background-color':'pink','color':'white'}">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

效果如下（示例）：
在这里插入图片描述使用固定对象Object传参时，会为所有行添加统一的样式。但是如果想给指定的行添加样式，就无法使用Object传参了，需要使用Function了

使用Function

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :row-style="rowStyle">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>
<script>
export default {
	methods:{
   		rowStyle({row,rowIndex}){
     		if(row.name=="王小狼"){
       			return {
         			"background":"skyblue",
         			"color":"green"
       			}
     		}
   		}
	}
}
</script>

效果如下（示例）：
在这里插入图片描述使用Function就可以为指定的行添加样式

2.cell-style

使用Object

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :cell-style="{'background-color':'blue','color':'red'}">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

效果如下（示例）：
在这里插入图片描述使用固定的对象传参，会为所有单元格都加上统一的样式，效果与row-style传固定对象效果一样。同样，如果要为指定单元格添加样式，就需要用到Function，效果也会与row-style产生差异

使用Function

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :cell-style="cellStyle">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

 methods:{
   cellStyle({row,column,rowIndex,columnIndex}){
     if(row.name=="王小狼" && column.property=="name"){
       return {
         "background":"gray",
         "color":"purple"
       }
     }
   }
}

效果如下（示例）：
在这里插入图片描述使用行、列数据就可以为指定单元格添加样式了

三、row-class-name/cell-class-name的使用

1.row-class-name

使用String

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" row-class-name="rowName">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>
<style>
.rowName{
 background:pink!important;
 color:deeppink
}
</style>

效果如下（示例）：
在这里插入图片描述

使用Function

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :row-class-name="rowClassName">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>
<script>
export default = {
 methods:{
   rowClassName({row,columnIndex}){
     if(row.date=="2022-05-01"){
       return "rowName"
     }
   }
 }
} 
</script>
<style>
.rowName{
 background:deeppink!important;
 color:whitesmoke
}
</style>

效果如下（示例）：
在这里插入图片描述

2.cell-class-name

使用String

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" cell-class-name="cellName">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
</div>
</template>
<style>
.cellName{
 background:brown!important;
 color:chartreuse
}
</style>

效果如下（示例）：
在这里插入图片描述

使用Function

代码如下（示例）：

<template>
 <div>
   <el-table :data="tableData" :cell-class-name="cellClassName">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

 methods:{
   cellClassName({row,column,rowIndex,columnIndex}){
     if(row.date!="2022-05-01" && column.label=="日期"){
       return "cellName"
     }
   }
 }

<style>
.cellName{
 background:blueviolet!important;
 color:aqua
}
</style>

效果如下（示例）：
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

elementui

javascript

前端

前端框架

el-table添加行/单元格样式 的相关文章

随机推荐

  • 实现3D照片墙效果

  • 如何与老板谈加薪

    工作时间不短了 自己感觉业绩也不少了 可是老板似乎总也视而不见 发到手的薪水还只是那么点儿 于是乎 总有些愤愤不平的 心里难免就打起了小九九 觉得老板太抠 觉得自己遭遇太不公 这时候 就该跟老板谈谈加薪的事情啦 如果不谈 也许就该考虑是不是

  • 嵌入式程序员 应该知道的0x10个基本问题

    文章目录 1 用 预处理指令 define 声明一个常数 用以表明 1 年中有多少秒 忽略闰年问题 2 写一个标准宏 MIN 这个宏输入两个参数 并返回较小的一个 3 预处理器标识 error 的目的是什么 4 嵌入式系统中经常要用到无限循

  • sudo配置文件/etc/sudoers详解及实战用法

    一 sudo执行命令的流程 将当前用户切换到超级用户下 或切换到指定的用户下 然后以超级用户或其指定切换到的用户身份执行命令 执行完成后 直接退回到当前用户 具体工作过程如下 当用户执行sudo时 系统会主动寻找 etc sudoers文件

  • Spark 从入门到放弃（一）Spark基础概念

    一 Spark基础概念 1 Application Spark应用程序 application 应用 其实就是用spark submit提交的程序 一个application通常包含三部分 从数据源 比方说HDFS 取数据形成RDD 通过R

  • linux下python组织自定义模块，解决模块存在无法导入

    问题背景 在windows下使用pycharm开发python程序 包导入正常 但是移植到Linux却说包找不到了 No module named xxx python包路径搜索机制 python搜索包的路径存储在sys path下 临时添

  • 【测试设计】使用jenkins 插件Allure生成自动化测试报告

    前言 以前做自动化测试的时候一直用的HTMLTestRunner来生成测试报告 后来也尝试过用Python的PyH模块自己构建测试报告 在后来看到了RobotFramework的测试报告 感觉之前用的测试报告都太简陋 它才是测试报告应该有的

  • 分布式两阶段提交和三阶段提交

    随着大型网站的各种高并发访问 海量数据处理等场景越来越多 如何实现网站的高可用 易伸缩 可扩展 安全等目标就显得越来越重要 为了解决这样一系列问题 大型网站的架构也在不断发展 提高大型网站的高可用架构 不得不提的就是分布式 本文主要介绍关于

  • CSS 动画实战：创建一个漂亮的加载动画

    这篇文章 用一个实例来讲下用伪元素和CSS Animation来创建一个漂亮的加载动画 首先来看下 要实现的动画效果 先来分析下 这个动画效果是由哪几个动画组成 1 线段依次出现 2 然后红色 橙色和白色矩形依次出现 3 这些矩形出现之后

  • 微信小程序nodejs+vue高校食堂餐厅点餐订餐系统ja221

    本文以实际运用为开发背景 运用软件工程原理和开发方法 它主要是采用 语言 node js 框架 Express 前端 Vue js 数据库 mysql 数据库工具 Navicat 开发软件 VScode 前端vue elementui 1

  • 12000字解读白小T：成立1年创收1亿，单品类策略如何引爆流行?

    主笔 西兰卡普 研究员 白婷丹 Leo 西兰卡普 陆压 出品 增长黑盒研究组 研究支持 久谦中台 飞瓜数据 App Growing 前言 最近两年 当我们与新消费品牌创业者及操盘手探讨服饰赛道最新风向时 大家高频提及的不外乎是Bosie A

  • kubernetes Ingress资源管理

    k8s 对外服务之 Ingress Ingress 简介 service的作用体现在两个方面 对集群内部 它不断跟踪pod的变化 更新endpoint中对应pod的对象 提供了ip不断变化的pod的服务发现机制 对集群外部 他类似负载均衡器

  • 关于STM32的IAP与APP互相跳转

    关于STM32的IAP与APP互相跳转 之前做了一个不带系统的IAP与APP互相跳转 在网上找了资料后 很顺畅就完成了 后来在IAR集成开发环境下 IAP无系统 APP用UCOS系统做互相跳转出现了很多问题 现将IAP学习过程和实际遇到问题

  • 柏林噪声(Perlin Noise) 介绍及应用

    什么是噪声 信号处理中一般指原信号中不存在的无规则的额外信号 在处理过程中一般是我们不需要的 需要被处理掉的 噪声和信号本身无关 其频率和强弱变化无规律 噪声有什么用处 就如上面提到的那样 噪声是干扰原信号的存在 在信号处理中 我们一般都希

  • Spring基础总结

    Spring基础总结篇 1 获取 Spring 的 IOC 容器 并根据 bean 的 id 获取注入对象 1 通过 BeanFactory 获取 Bean 2 通过 ApplicationContext 应用上下文获取 Bean 2 Be

  • 玩转Mysql系列 - 第8篇：详解排序和分页(order by & limit)，及存在的坑

    这是Mysql系列第7篇 环境 mysql5 7 25 cmd命令中进行演示 代码中被 包含的表示可选 符号分开的表示可选其一 本章内容 详解排序查询 详解limit limit存在的坑 分页查询中的坑 排序查询 order by 电商中

  • RedditVideoMakerBot 视频制作机器人自动生成视频搭建教程

    https github com elebumm RedditVideoMakerBot搭建教程 RedditVideoMakerBot视频制作机器人 有些在抖音 快手上的视频获得了数百万的观看次数 你仔细分析他们的视频 他们唯一做的原创事

  • 修改pip国内源

    修改pip国内源 修改源方法 临时使用 可以在使用pip的时候在后面加上 i参数 指定pip源 例如 pip install scrapy i https pypi tuna tsinghua edu cn simple 永久修改 linu

  • 【计算机视觉】直接线性变换（DLT）求解P矩阵（3 加入坐标的归一化）（附MATLAB代码）

    引言 本来上一篇帖子就已经达到了精度要求 不过经过同学提醒才发现老师的作业要求中有要求考虑归一化 emmmmm 坐标归一化 进行归一化的必要性和方法参考 计算机视觉中的多视几何 中的描述 上面的是从 2D到2D的结论 不过与从3D到2D的结

  • el-table添加行/单元格样式

    文章目录 一 官方文档释义 1 row style cell style 2 row class name cell class name 二 row style cell style的使用 1 row style 使用Object 使用F

热门标签