使用naive-ui做一个标签页展示列表-编程知识

使用naive-ui做一个标签页展示列表

零、引言

一、引入所需组件

二、引入数据

三、使用动态样式控制列表条纹

四、全部代码

五、设计思路

5.1组件设计思路

5.2背景颜色控制思路

5.3说明

六。最终效果

零、引言

有时候我们会有很多数据，分成好几类

每一类都需要展示，那么这时候传统的表格可能用处就不是很大了，于是乎我们就自己来写一个数表单

一、引入所需组件

在这里，我们使用了NCard, NTabs, NTabPane这三个组件

import { NCard, NTabs, NTabPane } from 'naive-ui'

二、引入数据

const tabs = {星期一: 1,星期二: 2,星期三: 3,星期四: 4,星期五: 5,星期六: 6,星期日: 7,
};
const data = [{info: "这是消息1",msg: "你挂科了！",},{info: "这是消息2",msg: "你及格了！",},{info: "这是消息3",msg: "你延毕了！",},{info: "这是消息4",msg: "你评优了！",},{info: "这是消息5",msg: "你失败了！",},
];
export { tabs, data };

三、使用动态样式控制列表条纹

const backColor = ref(["background-color:#F2F9FA", "background-color:#FFD700"])

四、全部代码

<template><n-card title="测试样例" style="margin-bottom: 16px;max-width:50%;"><n-tabs style="flex" type="line"><n-tab-pane v-for="(value, index) in tabs":key="index":name="index":tab="index"><!-- 下面是题目列表 --><div v-for="(value, index) in data" :key="index"><divclass="topic-details":style="backColor[index &1]">{{ value.msg }}<!-- 这里面需要写很多样式 --></div></div></n-tab-pane></n-tabs></n-card>
</template><script lang="ts" setup>
import { ref } from 'vue'
import { NCard, NTabs, NTabPane } from 'naive-ui'
import { tabs, data } from "./data";const backColor = ref(["background-color:#F2F9FA", "background-color:#FFD700"])
</script><style scoped>
.topic-details {min-height: 50px;
}
</style>