4-11——4-18项目开发过程杂记

vue表格

任务要求：

实现：

实现细节：
1.系统监测组件：
两个表，电缆表和设备表都是在home组件的子组件系统监测的子路由来实现的。

const routes = [
  { path: '/', redirect: '/login' },
  {
    path: '/login', component: Login
  },
  {
    // name:"Home",
    path: '/home',
    component: Home,
    children:
    [{
      path: '/systemMonitoring', redirect: '/cable'
    },
    {
      path: '/systemMonitoring',
      component: SystemMonitoring,
      children: [
        { path: '/equipment', component: Equipment },
        { path: '/cable', component: Cable }
      ]
    },
    { path: '/systemLog', component: SystemLog },
    { path: '/historyData', component: HistoryData },
    { path: '/advancedAnalysis', component: AdvancedAnalysis }
    ]
  }
]

再者为了实现系统组件打开后首先默认显示电缆表，在系统监测组件中通过路由重定向实现默认显示电缆表。
2.历史数据组件：

这里的实现使用了栅格布局，每个栅格的span占据6格，gutter（栅格之间的间距设置为20）
实现表的下拉条，给表设置适当的高度，当表中的数据超过这个值的时候就会出现下拉条。

圆形按钮的实现，等宽等高，border-radius设置为50%