SRE功能页面开发篇

关注“希里安”，get更多有用干货！

截止昨日，我们已经搭建了一个比较简单的页面布局，就是说有了头部、侧边菜单栏、主显示区以及一个页脚四大部分。那么有了这些，你总得在主显示区显示点东西，就是说你想实现什么功能，你就设计显示什么内容，那么我们今天就是研究这个，做一个简单的功能页面。

比如昨天在deployment的页面做了一个简单的试用elmentplus相关组件是如何使用的，比如常规的按钮、图标、表单、表格等等，那么就像搭积木一样，如何好好使用这些组件，有机结合成一个自己想要的页面才是关键。所以灵活使用组件，虽然组件都是一样，但是不一样的搭配就又不同的显示效果，有的比较简洁，有的花里胡哨比较美观。

那么今天我们就搭建一个比较简单的功能页面。在设计功能页面之前，你得想好，你想实现什么功能再去做。那么我们主要就是用来展示K8s节点的详细信息，也可以搜索对应的节点信息，比如有几个节点，什么样的硬件配置有几个核心内存多大、系统版本、搭建的时间等。直接上完成的页面图：

这个显示页面主要就是两部分内容，一个是搜索框、一个是表格框，虽然看起来比较简陋，但是主要目的达到了，后期再来不断完善美观一下。那么用到了那些组件呢，大家可以看一下。

1、一个搜索框、就是快捷搜索那一块。

2、就是搜索按钮

3、展示表格

4、以及表格分页

这个搜索框、按钮都比较好实现，大家直接官网复制粘贴使用就行了，今天主要介绍一下如何使用表格以及分页。

我们设计这个表格，主要是为了展示k8s集群中节点的具体信息，我直接贴代码：

再看看实际页面效果：

可以看到这里是有表格信息的，但是这些数据是死的，这里在模板中添加表格的标签，然后将数据源绑定到表格数据上。然后就是通过scoped slot插值来渲染，至于插值的内容，还得单独后面说一下，作用就是比较灵活，可复用，我们这里直接按官网的先用就是了。因为还没有开发后端，所以获取的数据是我们前端定死的，后期后端开发api之后，就能直接调用k8s集群的信息，来实时更新到这个面板上。

那怎么用这个分页呢，还是在官网复制粘贴，用那个完整版的，这样就能看到总计页面、以及当前页面，每页显示条数，和跳转功能。

直接看页面效果：

由此可以知道，其余的前端功能页面开发也是大致这个流程，就是你先知道你的功能页面需要哪些功能，然后你再去官网搜索相关的组件，根据自己的喜好，将组件摆放在合适的位置，然后一个简单的功能页面就能快速完成，只是现在功能页面展示的数据是定死的，比如我这个k8s的集群信息的数据是假数据，那么如何得到真实的信息，这里就要用到前端调用后端的功能，那么明天就来研究一波。

感兴趣的朋友记得点赞关注呀！

END