vxe-table循环生成表格,表格里的某些数值设置颜色

news/2024/7/9 23:42:55 标签: 前端, javascript, vue

业务需求:表格的列名是循环出来的,后台返回每行的表格数据结构如下,需要表格里只有“当期”的行里数值超限waterGuildLine后显示红色。需要在vxe-table里写个插槽,再写个方法。

          <vxe-table border ref="dayTableRef" height="100%" :column-config="{ resizable: true }" :data="tableDataInstShow"
            :menu-config="menuConfig" @menu-click="contextMenuClickEvent">
            <vxe-column v-for="(item, index) in columnDayData" :key="item.value" :field="item.value" show-overflow
              :title="item.name" align="center" :width="index === columnDayData.length - 1 ? 100 : filterWidth(item.name)"
              :fixed="index === 0 ? 'left' : (index === columnDayData.length - 1) ? 'right' : ''">
              <template #default="{ row }">
                <span :style="getRowStyle(row, item.value)">{{ row[item.value] }}</span>
              </template>
            </vxe-column>
          </vxe-table>

 

 

javascript">       state.columnDayData = [
          { name: '年月', value: 'getTime' },
        ];

        for (let i = 1; i < 32; i++) {
          state.columnDayData.push({ name: `${i}号`, value: `day${i}` })
        }
        state.columnDayData.push({ name: '合计', value: 'total' })



     getRowStyle(row, columnKey) {
        if (state.selectValue3 === '2' && row?.getTime?.indexOf('当') !== -1) {
          const value = row[columnKey];
          if (value > row?.waterGuideLine && columnKey !== 'getTime' && columnKey !== 'total') {
            return 'color: var(--gdky-warning-status-color)';
          }
        }
        return '';
      },


http://www.niftyadmin.cn/n/5261634.html

相关文章

多维时序 | MATLAB实现RIME-LSSVM【23年新算法】基于霜冰优化算法(RIME)优化最小二乘向量机(LSSVM)多变量时间序列预测

多维时序 | MATLAB实现RIME-LSSVM【23年新算法】基于霜冰优化算法(RIME)优化最小二乘向量机(LSSVM)多变量时间序列预测 目录 多维时序 | MATLAB实现RIME-LSSVM【23年新算法】基于霜冰优化算法(RIME)优化最小二乘向量机(LSSVM)多变量时间序列预测预测效果基本介绍模型描述程序设…

数理统计基础:参数估计与假设检验

在学习机器学习的过程中&#xff0c;我充分感受到概率与统计知识的重要性&#xff0c;熟悉相关概念思想对理解各种人工智能算法非常有意义&#xff0c;从而做到知其所以然。因此打算写这篇笔记&#xff0c;先好好梳理一下参数估计与假设检验的相关内容。 1 总体梳理 先从整体结…

光线追踪简介【ray tracing】

为了开始本课程&#xff0c;我们将解释如何将三维场景制作成可视的二维图像。 一旦我们了解了这个过程及其涉及的内容&#xff0c;我们就可以利用计算机通过类似的方法来模拟“人造”图像。 本章描述 CGI 的构建基础。 在本课的第二章中&#xff0c;我们将介绍光线追踪&#x…

爬虫 scrapy ——scrapy shell调试及下载当当网数据(十一)

目录 一、scrapy shell 1.什么是scrapy shell&#xff1f; 2.安装 ipython 3.使用scrapy shell 二、当当网案例 1.在items.py中定义数据结构 2.在dang.py中解析数据 3.使用pipeline保存 4.多条管道的使用 5.多页下载 参考 一、scrapy shell 1.什么是scrapy shell&am…

二、如何保证架构的质量、架构前期准备、技术填补与崩溃预防、系统重构

1、如何保证架构的质量 -- 稳定性和健壮性 2、正确的选择是良好的开端 -- 架构前期准备 ① 架构师分类&#xff1a;系统架构师、应用架构师、业务架构师 3、技术填补与崩溃预防 4、系统重构

TCP/IP详解——TCP 协议

文章目录 一、传输层协议1. TCP1.1 TCP 的字节流1.2 TCP 端口号1.3 TCP 头部1.4 TCP 选项部分字段1.5 TCP 三次握手1.6 TCP 三次握手不成功1.6.1 TCP 拒绝&#xff08;被RST重置&#xff09;1.6.2 TCP 半连接1.6.3 TCP 连接无响应 1.7 TCP 传输过程及原理1.7.1 TCP 传输过程1.7…

Unity中Shader URP 简介

文章目录 前言一、URP&#xff08;Universal Render Pipeline&#xff09;由名字可知&#xff0c;这是一个 通用的 渲染管线1、Universal&#xff08;通用性&#xff09;2、URP的由来 二、Build-in Render Pipeline&#xff08;内置渲染管线&#xff09;1、LWRP&#xff08;Lig…

如何应对网站的Canvas等高级指纹和MAC地址检测?

随着互联网技术的发展&#xff0c;网站和应用程序采用了越来越多的高级指纹和MAC地址检测技术来追踪用户和识别其身份。其中&#xff0c;Canvas指纹是一种常见的高级指纹检测技术&#xff0c;而MAC地址是设备的唯一标识符。在本文中&#xff0c;我们将了解Canvas指纹和MAC地址的…