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

JSU_曾是此间年少2023-10-22 18:42

具体参考之前的博文：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;
}