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