通过cell-class-name和row-class-name实现数据状态行变色

回调事件实现行颜色改变

效果如图

cell-class-name

单元格的className的回调方法,也可以使用字符串为所有单元格设置一个固定的

className function - ({row,column,rowIndex,columnIndex})=>{}

row-class-name

的className的回调方法,也可以使用字符串为所有行设置一个固定的className

row-class-name function - ({row,rowIndex})=>{}

html 复制代码
:cell-class-name="className"

此处仅用到row参数判断,故用cell-class-name或者row-class-name都可,方法参数row当前行颜色

javascript 复制代码
className({row}) {
     if (row.approveStat === '1'){
       return 'success-row';
      }
      }else
        return 'warning-row'
    },
html 复制代码
	.warning-row{
	  background-color: #f5ce6c !important;
	}
	.success-row{
	  background-color: #99c88a !important;
	}

单元格回调事件实现 某列颜色改变

效果如表格下图验证材料绿色标注此列

javascript 复制代码
cellStyle({row, column, columnIndex}) {
        if ( column.property == 'verifymaterial')
          return 'row-color'
        else return
      },
相关推荐
云枫晖5 分钟前
手写Promise-构造函数
前端·javascript
王王碎冰冰9 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
三小河2 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
Hilaku2 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
云枫晖2 小时前
手写Promise-什么是Promise
前端·javascript
DevUI团队2 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能