表格根据每一行的某格单元格的数据和其他数据进行动态的比较,根据比较的结果给当前行设置不同的颜色。vue3,info

2023-12-13 22:57:16

const handleChangeCellStyle=({row, column, rowIndex, columnIndex})=>{
  console.log(rowIndex,"<<<=== rowIndex 行的下标")
  console.log(row,"<<<=== row 行的数据")

  const lastMatch=test(row)
  console.log(lastMatch,"<<<=== lastMatch 单元格函数里的")

    // 进行比较
    if (lastMatch.upperLimit == null) {
    if (row.indexValue < lastMatch.lowerLimit) {
      return {color:"red"};
    } else {
      return {color:"black"};
    }
  } else if (lastMatch.lowerLimit == null) {
    if (row.indexValue > lastMatch.upperLimit) {
      return {color:"red"};
    } else {
      return {color:"black"};
    }
  }else{
    if(row.indexValue>lastMatch.upperLimit){
      return {color:"red"};
    }else if(row.indexValue<lastMatch.lowerLimit){
      return {color:"red"};
    }else{
      return {color:"black"};
    }
};

  // if(rowIndex===1){
  //   return {color:"#189EFF"}
   
  // }else{
  //   return {color:"#1CD66C"}
  // }
}
// 写一个方法,封装匹配的代码,方便在其他地方用
const test=(data)=>{
  // 在字典里拿到中文
  const match = index_name.value.find((item) => {
    return item.value == form1.value.indexId;
    // console.log(match, "<<<=== match 匹配到的元素");
  });

  //在健康指标数据里根据中文进行匹配找到匹配的元素
  const lastMatch = healthData.value.find((item) => {
    return item.indexName == match.label;
  });
  console.log(lastMatch, "<<<=== lastMatch 健康指标数据匹配到的元素");

  return lastMatch
}

?写一个方法,在表格的插值语法中调用,将最终的结果显示在表格中

// 写一个方法,测量结果比较,最终的结果显示在表格中
const measurement = (data) => {
  console.log(data, "<<<=== data 测量结果函数 传进来当前行");
  
  const lastMatch=test(data)
  
  // 进行比较
    if (lastMatch.upperLimit == null) {
    if (data.indexValue < lastMatch.lowerLimit) {
      return "低于正常值";
    } else {
      return "正常";
    }
  } else if (lastMatch.lowerLimit == null) {
    if (data.indexValue > lastMatch.upperLimit) {
      return "高于正常值";
    } else {
      return "正常";
    }
  }else{
    if(data.indexValue>lastMatch.upperLimit){
      return "高于正常值"
    }else if(data.indexValue<lastMatch.lowerLimit){
      return "低于正常值"
    }else{
      return "正常"
    }
};

}

?

文章来源:https://blog.csdn.net/Frank_colo/article/details/134872374
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。