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

效果展示:

vueday02——使用naive-ui做一个ACM看榜_第1张图片

 组件导入

行数据导入数据结构

{
        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'],
        
    },

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

vueday02——使用naive-ui做一个ACM看榜_第2张图片

列名定义与题目列名组装

vueday02——使用naive-ui做一个ACM看榜_第3张图片

 

你可能感兴趣的:(ui,java,前端)