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;
}
相关推荐
欢脱的小猴子18 小时前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
boonya2 天前
国内外常用的免费BUG管理工具选型
bug
10岁的博客3 天前
Bug排查日记:高效记录与解决之道
bug
彭刷子3 天前
【Bug】Nexus无法正常启动的五种解决方法
bug·nexus
黑客飓风3 天前
从基础功能到自主决策, Agent 开发进阶路怎么走?
面试·log4j·bug
mahuifa3 天前
C++(Qt)软件调试---bug排查记录(36)
c++·bug·软件调试
Kyln.Wu3 天前
【python实用小脚本-205】[HR揭秘]手工党逐行查Bug的终结者|Python版代码质量“CT机”加速器(建议收藏)
开发语言·python·bug
2501_930104043 天前
Bug 排查日记:打造高效问题定位与解决的技术秘籍
bug
weixin_377634843 天前
【YOLO】数据增强bug
yolo·bug