1107:antd table改变特定数据行的背景色

1107:antd table改变特定数据行的背景色_第1张图片
1107:antd table改变特定数据行的背景色_第2张图片
如上图所示,根据reply_coutn这个值来改变一行数据的颜色,把最大的reply_count值的行背景改为红色,最小的改为绿色,据统计:其中最最大的为191,最小的为0
实现代码如下:
用到的主要函数为antd的自带方法:
customRow: 设置行属性 Function(record, index) -

// 单元格属性[行]
    onCustomRow(record, index) {
      console.log('record', record, 'index', index);
      const arr = [];
      // 循环出一页的数据里面的reply_count
      this.data.forEach(ele => {
        arr.push(ele.reply_count);
      });
      if (record.reply_count === Math.max(...arr)) {
        return {
          style: {
            background: 'red',
          },
        };
      }
      if (record.reply_count === Math.min(...arr)) {
        return {
          style: {
            background: 'green',
          },
        };
      }
    },

你可能感兴趣的:(笔记,前端,javascript)