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

使用后就是这个样子

 

目录
相关文章
|
9月前
element-plus table表格cell-style的使用
element-plus table表格cell-style的使用
473 2
element-plus table表格cell-style的使用
|
存储 前端开发 JavaScript
Element el-table 表格详解
本文目录 1. 前言 2. 基本用法 3. 显示斑马纹 4. 显示边框 5. 自定义尺寸 6. 显示索引 7. 显示内容过长时的提示 8. 自定义行样式 9. 固定表头 10. 固定列 11. 多级表头 12. 展开行 13. 自定义列模板 14. 单选 15. 多选 16. 前端排序 17. 小结
3429 0
Element el-table 表格详解
|
JavaScript
Element UI - el-table-column 属性之 show-overflow-tooltip 爬坑
Element UI - el-table-column 属性之 show-overflow-tooltip 爬坑
2510 0
|
JavaScript
element-ui:el-table合并单元格后的行高亮显示
element-ui:el-table合并单元格后的行高亮显示
808 0
element-ui:el-table合并单元格后的行高亮显示
Element UI - el-table el-table-column 表头自定义
Element UI - el-table el-table-column 表头自定义
737 0
Element UI - el-table el-table-column 表头自定义
|
前端开发
Element UI - el-table 表格 hover 修改背景色
Element UI - el-table 表格 hover 修改背景色
1057 0
Element UI - el-table 表格 hover 修改背景色
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
6190 0
Element el-row el-col 布局组件详解
|
9月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序

热门文章

最新文章