element-plus table表格cell-style的使用

简介: element-plus table表格cell-style的使用

在做项目的时候使用到了这个属性

需求是:表格里的两个值进行匹配,如果不相同则给那一列的字体颜色变为红色,方便一眼就能看到

template:

先给表格绑定一下cell-style属性

<el-table
          :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
          :row-style="rowState"
          :cell-style="cellStyle"
          style="width: 100%"
          id="my-table"
        >

可以看出来此方法有4个回调函数

row:当前行

columnIndex: 列的下标

然后通过当前行和列的下标来对表格进行操作

const cellStyle= ({ row, column, rowIndex, columnIndex })=> {
  // 状态列字体颜色
  if (row.bz_wages_fixed !== row.bz_wages && columnIndex === 13) {
        return {'color': 'red'}
    } 
}

使用后就是这个样子

相关文章
|
监控 JavaScript
vue中监控元素大小变化element-resize-detector
vue中监控元素大小变化element-resize-detector
727 0
|
JavaScript 前端开发
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
【导出Excel】Vue实现导出下载Excel文件(blob文件流)--亲测可用
|
JavaScript 前端开发 安全
前端实践:如何防止xss跨站脚本攻击(vue代码说明)
XSS(跨站脚本)攻击是一种常见的网络安全漏洞,攻击者通过在网页中注入恶意脚本代码,从而实现窃取用户信息、盗取会话令牌等攻击目的。为了防止XSS攻击,我们可以采取以下措施:
7854 0
前端实践:如何防止xss跨站脚本攻击(vue代码说明)
|
移动开发 JavaScript 前端开发
Element Plus for Vue 3 入门教程
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级,对于第三方组件库来说是一件好事,那些已经修修补补无数次,还无法彻底解决的问题,在这次面向 Vue 3.0 重构时,一次性全部解决。
3919 0
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
关系型数据库 分布式数据库 数据库
PolarDB 开源基础教程系列 9 开源社区合作和共建
本文介绍了玩转 PolarDB 开源社区指南:如何搭建 PolarDB 开发环境及参与开源社区。 主要内容: 1. **搭建开发环境**:提供多种 Docker 镜像供开发者选择,支持 x86_64 和 ARM64 架构,适配 CentOS、Debian、Ubuntu 等多个 Linux 发行版。 2. **编译与部署**:通过 Docker 容器克隆 PolarDB 源码并编译安装,支持构建一写多读集群测试 ePQ MPP 优化器功能。 3. **参与开源社区**:介绍个人、生态伙伴和用户如何从社区中获取技能、建立连接、积累战绩并提升影响力。社区活动涵盖公开课、训练营、编程大赛、企业行等。
553 7
|
运维 Kubernetes API
k8s临时容器ephemeral
k8s临时容器ephemeral
|
机器学习/深度学习 自然语言处理 算法
使用自然语言处理技术提升文本分类准确率
在当今信息爆炸的时代,准确的文本分类对于信息管理至关重要。本文探讨了如何利用先进的自然语言处理技术,结合深度学习模型,提升文本分类的准确率和效率。通过详细的实验分析和案例研究,展示了不同方法在不同场景下的应用效果和优劣比较,为技术人员提供了实用的指导和启发。
447 27
|
JavaScript 前端开发 开发者
摸鱼必备!!10个你不知道的 Vue 3 组件库...
摸鱼必备!!10个你不知道的 Vue 3 组件库...
|
数据采集 API C#
网页解析高手:C#和HtmlAgilityPack教你下载视频
使用C#和HtmlAgilityPack解析小红书网页,下载其视频内容。文章涵盖了解析网页、获取视频链接、C#实现、HtmlAgilityPack简化解析、代理IP确保下载稳定及多线程提高下载效率。提供的代码示例展示了如何设置代理和多线程下载视频。实验结果显示,该方法能有效、高效地下载小红书视频。
403 5
网页解析高手:C#和HtmlAgilityPack教你下载视频

热门文章

最新文章