使用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"])

四、全部代码

五、设计思路

5.1组件设计思路

我们在官网了看见每个n-tab-pane是写死的，所以我们可以使用循环控制生成标签页，标签页没有关联，我们就采用字典来组合起来

然后每个n-tab-pane实际上渲染的是同一个框架，只不过每次点击可以设置请求不同的数据，给用户一种切换了容器的样子，你也可以在切换过程中加上加载动画使其看起来逼真

5.2背景颜色控制思路

这里采用了:style来进行动态渲染，:class不知道为什么不能渲染

5.3说明

关闭了全局的居中，所以看起来可能有点不对称

六。最终效果

各位可以发挥创造力自己改装哈！