naive-ui的n-data-table标签奇特bug记录

具体参考之前的博文:vueday02------使用naive-ui做一个ACM看榜-CSDN博客

具体代码在这里面

原因:在本地运行的时候,datatable里面使用列表渲染成字符串前端设置样式进行转换,但是在正式部署的时候,这个组件没有将其自动转换,造成前端页面死转,CPU拉满造成卡顿,任何调试信息都没有,后面一步一步做单元测试部署,将list手动转成str解析即可

原始data(模拟后端传过来的数值):

复制代码
const datas = ref([
// 代表后端传来的数据
// 0
{
    problemA: ["*", "\n", "1", "/", "2"],
    problemB: ["*", "\n", "1", "/", "2"],
    problemC: ["+", "\n", "1", "/", "2"],
    problemD: [" ", "\n", "0", "/", "0"],
    problemE: ["-", "\n", "0", "/", "2"],
    problemF: ["*", "\n", "7", "/", "10"],
    problemG: ["*", "\n", "1", "/", "2"],
    problemH: ["+", "\n", "2", "/", "2"],
    problemI: ["-", "\n", "0", "/", "2"],
},

给n-data-table的数据

复制代码
const data = ref([
  {
    key: 0,
    index: 1,
    name: "user Name1",
    solved: 3,
    // age: 32,
    college: "JiShou University",
    problemA: datas.value[0].problemA.join(""),
    problemB: datas.value[0].problemB.join(""),
    problemC: datas.value[0].problemC.join(""),
    problemD: datas.value[0].problemD.join(""),
    problemE: datas.value[0].problemE.join(""),
    problemF: datas.value[0].problemF.join(""),
    problemG: datas.value[0].problemG.join(""),
    problemH: datas.value[0].problemH.join(""),
    problemI: datas.value[0].problemI.join(""),
  },

颜色转换函数

复制代码
const judgeColor = (data:any) => {
      let color = "";
      // console.log("打印传入data", data)
      if (data[0] === "+") {
        color = '#e1ffb5'
      } else if (data[0] === "*") {
        color = '#3db03d'
      } else if (data[0] === "-") {
        color = '#ffd0d0'
      }
      // console.log("返回颜色", color)
      return color;
}
相关推荐
云和数据.ChenGuang15 小时前
java常见SSL bug解决方案
java·bug·ssl
cat_with_cat1 天前
测试:BUG篇
bug·测试
黑客飓风1 天前
Bug排查日记的技术
bug
Wiktok1 天前
[Wit]CnOCR模型训练全流程简化记录(包括排除BUG)
python·深度学习·bug
玄尺_0071 天前
bug:uniCloud报Business Failed, 参数有误retry invoke error
数据库·bug
程序猿阿伟1 天前
《云原生边缘与AI训练场景:2类高频隐蔽Bug的深度排查与架构修复》
人工智能·云原生·bug
夕阳UPdz2 天前
深入探索 Unity 错误排查过程:从“滚动条问题”到“鼠标悬浮异常”
bug
I still …2 天前
面向OS bug的TypeState分析
bug
欢脱的小猴子3 天前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug