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

使用后就是这个样子

 

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