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'}
    } 
}

使用后就是这个样子

 

目录
相关文章
|
Web App开发 缓存 数据安全/隐私保护
解决浏览器自动填充用户名和密码最优雅的解决方案,优雅永不过时
浏览器记住用户名和密码并且自动填充怎么破?百度找的方法好像都不够优雅,优雅永不过时,今天我就带你优雅的解决这个问题。
3466 0
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10375 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
1759 0
Element UI & Element Plus之改变表格单元格颜色
element-plus table表格cell-style的使用
element-plus table表格cell-style的使用
698 2
element-plus table表格cell-style的使用
|
资源调度 JavaScript
yarn错误The engine “node“ is incompatible with this module
yarn错误The engine “node“ is incompatible with this module
858 0
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
11583 120
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
3198 0
el-input限制输入整数等分析
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录
本文介绍了在Vue 3中使用Element UI Plus的Carousel组件实现跑马灯效果的方法,并分享了在实现过程中遇到的常见问题和解决方案。
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录