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 前端开发
Element Plus for Vue 3 入门教程
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级,对于第三方组件库来说是一件好事,那些已经修修补补无数次,还无法彻底解决的问题,在这次面向 Vue 3.0 重构时,一次性全部解决。
3686 0
|
监控 JavaScript
vue中监控元素大小变化element-resize-detector
vue中监控元素大小变化element-resize-detector
627 0
|
JavaScript
Vue~在线预览doc、docx、pdf、img文件
Vue~在线预览doc、docx、pdf、img文件
7078 0
【echarts报错】line series not exists,should be same with series name or data name
【echarts报错】line series not exists,should be same with series name or data name
657 0
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
1246 0
Element UI & Element Plus之改变表格单元格颜色
|
8月前
|
存储 文字识别 JavaScript
Uppy:告别传统上传!这款开源工具如何让文件传输效率提升300%?🐶
**Uppy** 是由 Transloadit 团队开发的模块化、高扩展性的 JavaScript 文件上传库,支持断点续传、云存储直传、图片编辑等高级功能。它无缝集成 React、Vue 等框架,兼容移动端,被 Instagram、知乎等企业采用。Uppy 采用“核心+插件”架构,代码轻量且功能强大,适合电商、在线教育等多种场景。项目开源免费,GitHub 获得数万星标,提供丰富的插件生态和跨平台支持。
529 4
ElementPlus 之 el-select 多选实现全选功能
本文介绍了在ElementPlus框架中,如何通过自定义事件处理和条件判断实现`el-select`多选控件的全选功能。
1891 1
ElementPlus 之 el-select 多选实现全选功能
|
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 )的使用
|
移动开发 前端开发
flowable一对并发网关跳转的分析
flowable一对并发网关跳转的分析
452 0
|
Java Linux Windows
【Java】已解决Java中的java.lang.UnsatisfiedLinkError异常
【Java】已解决Java中的java.lang.UnsatisfiedLinkError异常
1836 0