vueday02——使用naive-ui做一个ACM看榜

效果展示：

组件导入

<n-data-table
    :data="data"
    :columns="column"
    :bordered="true"
    :single-line="false"
  />

行数据导入数据结构

{
        key: 1,
        index: 2,
        name: 'user Name2',
        passNum:0,
        // age: 42,
        college: 'JiShou University',
        problemA: ['-','\n', '0','/','9'],
        problemB: ['-','\n', '0','/','9'],
        problemC: ['*','\n', '3','/','7'],
        problemD: ['-','\n', '0','/','2'],
        problemE: ['+','\n', '3','/','3'],
        problemF: ['+','\n', '7','/','10'],
        problemG: ['+','\n', '2','/','2'],
        problemH: ['+','\n', '2','/','2'],
        problemI: ['-','\n', '0','/','2'],
        
    },

题目列表信息导入及颜色赋值

列名定义与题目列名组装