Antd表格组件使用
五一小长假结束了，今天又是五四青年节，各位朋友节假日过得怎么样？
五一节假日偷了个懒，这几天就没有写文章分享给大家了，今天我们总结下四月的开发进度：
四月上半旬：主要介绍前后端开发基础，并走通了一个简单前后端分离的应用开发全流程，并进行了应用容器化和k8s部署。
四月下半旬：分享了几个优秀的开源前端项目，定下一个自己的开发项目。完成从需求分析到架构设计再到前后端功能的设计实现的三部分内容的梳理，截止4月底开发处于监控模块的开发。
五月的开发计划：
上半旬：前端页面的设计和功能开发
下半旬：后端接口的开发并开源此项目
上一次的开发停留在导航页转到监控面板garfana的展示地址：
那么接下来的时间，我们就用比较快的速度，把容易实现的模块功能实现出来。
比如在导航菜单直接添加一个子项目：
{
path: 'logs',
name: 'Logs',
component: () => import('/@/views/dashboard/workbench/index.vue'),
meta: {
title: t('routes.dashboard.logs'),
},
},先添加需要模块的导航菜单以及展示面板
先把传统模块的子模块放上去：
1、监控面板
暂时使用超链接的方式转到grafana面板或者zabbix面板
2、任务执行
这一块的话，就是执行批量命令，实现方式暂时还没想好
3、日志汇总
还是使用转链接，转到已经成熟的日志面板，应该是比交快速的方法
4、网络面板
这一块打算汇总ping命令、路由追踪、端口查询等常用网络排障功能,具体我想应该有
（1）ip地址管理
（2）策略汇总，比如防火墙
（3）流量监控
5、机器资产
就是简单的汇总机器资源信息的增删改查
6、终端界面
使用xterm.js实现一个命令行终端界面，实现类unix终端的样式和布局
传统模块大概就这些，我们就一个一个来解决。
这个面板可以根据喜好进行对应的增删改查：
相当于在这里做一个汇总的超链接面板而已并没有什么开发量。
然后添加一个简单的机器汇总的表单页面：
但是需要另外添加对应的组件：
import {optionsListApi } from '../../api/select';
import {FormProps, FormSchema } from '/@/components/Table';
import {BasicColumn } from '/@/components/Table/src/types/table';
import {VxeFormItemProps, VxeGridPropTypes } from '/@/components/VxeTable';要引入以上这些组件，到这里的时候慢慢发觉，虽然这个项目很方便，但是熟悉人家封装的组件还需要一段时间，所以如果不是特别着急，也还是建议自己走一遍开发流程。
我们再看看，如果直接引入antd的表格组件，官网代码：
<template>
<a-table :columns="columns"
:data-source="data">
<template #headerCell="{ column
}">
<template v-if="column.key === 'name'">
<span>
<smile-outlined />
Name
</span>
</template>
</template>
<template #bodyCell="{ column,
record }">
<template v-if="column.key ===
'name'">
<a>
{{ record.name }}
</a>
</template>
<template v-else-if="column.key
=== 'tags'">
<span>
<a-tag
v-for="tag in
record.tags"
:key="tag"
:color="tag === 'loser' ?
'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
</template>
<template v-else-if="column.key
=== 'action'">
<span>
<a>Invite 一 {{ record.name }}</a>
<a-divider
type="vertical" />
<a>Delete</a>
<a-divider
type="vertical" />
<a
class="ant-dropdown-link">
More actions
<down-outlined />
</a>
</span>
</template>
</template>
</a-table>
</template>
<script
lang="ts">
import {
SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import {
defineComponent } from 'vue';
const columns =
[
{
name: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
},
{
title: 'Action',
key: 'action',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
export default
defineComponent({
components: {
SmileOutlined,
DownOutlined,
},
setup() {
return {
data,
columns,
};
},
});
</script>
五四青年，千山万水，路在当下，一步一步走向属于自己热爱的那块土地！
腾讯云开发者
