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

使用后就是这个样子

 

目录
打赏
0
1
1
0
33
分享
相关文章
element ui table 表格高度自适应
设置element ui table 表格高度自适应
2241 0
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
6221 0
Element el-row el-col 布局组件详解
|
6月前
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
1340 0
|
10月前
element-plus table表格cell-style的使用
element-plus table表格cell-style的使用
483 2
element-plus table表格cell-style的使用
|
10月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
element-ui el-table 表格中行高和字体大小调整
element-ui el-table 表格中行高和字体大小调整
3823 0
el-table表格还可以这么玩
我们都知道表格是横向渲染的,一行一行去展示。不过博主这里有个需求是纵向渲染,一列一列去展示,下面是全部代码,分享出来或许能帮到你们
307 1
el-table表格还可以这么玩
element-ui:el-table合并单元格后的行高亮显示
element-ui:el-table合并单元格后的行高亮显示
815 0
element-ui:el-table合并单元格后的行高亮显示
Element-ui(el-table、el-pagination)实现表格分页
Element-ui(el-table、el-pagination)实现表格分页
1076 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等