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 表格高度自适应
2182 0
|
2月前
element el-table 设置fixed导致行错乱问题
文章讨论了在使用Element UI的`el-table`组件时,设置固定列(`fixed`)导致行错乱的问题,并提供了解决方案。问题产生的原因是当表格底部有滚动条而固定列底部没有滚动条时,行无法对齐。解决办法是在表格中设置`padding-bottom`的内边距与滚动条高度相等,确保固定列和非固定列的行能够对齐。
722 0
|
6月前
|
JavaScript 前端开发 索引
Element_Table的单元格合并
Element_Table的单元格合并
|
6月前
element-plus table表格cell-style的使用
element-plus table表格cell-style的使用
524 1
|
JavaScript
element-ui el-table 表格中行高和字体大小调整
element-ui el-table 表格中行高和字体大小调整
3349 0
|
前端开发
el-table表格还可以这么玩
我们都知道表格是横向渲染的,一行一行去展示。不过博主这里有个需求是纵向渲染,一列一列去展示,下面是全部代码,分享出来或许能帮到你们
288 1
el-table表格还可以这么玩
|
前端开发 数据安全/隐私保护
前端的那些基本标签【a table tr caption image等等......】
前端的那些基本标签【a table tr caption image等等......】
242 0
前端的那些基本标签【a table tr caption image等等......】
|
JavaScript
element-ui:el-table合并单元格后的行高亮显示
element-ui:el-table合并单元格后的行高亮显示
773 0
element-ui:el-table合并单元格后的行高亮显示
html表单元素的colspan和rowspan合并单元格
html表单元素的colspan和rowspan合并单元格
294 0
html表单元素的colspan和rowspan合并单元格
|
JavaScript 前端开发
Element-ui(el-table、el-pagination)实现表格分页
Element-ui(el-table、el-pagination)实现表格分页
1034 0