一、引入组件
1.搜索栏主要由一个搜索框和多个按钮组成
2.表格直接引入element-ui里的表格组件
3.分页组件同上
4.弹出框(模态框)同上
效果图:
二、准备工作
1、在侧边栏加上页面路由
在/src/router/index.js里加入如下代码
2、在/src/views里创建test文件夹,在该文件夹下创建index.vue文件
三、实现过程
1、搜索栏
2、表格
3、分页
4、弹出框
四、插入mock数据
根据第三步的步骤,做出来的页面只是空有一个架子,没有任何数据。接下来,我们尝试在表格里插入一些假数据。
1、把数据写死
直接把数据写入list,再填充到表格中。这样做的好处是简单,缺点是不够灵活。
2、使用mock数据
Test页面:src/views/test/index.vue
导入接口:fetchList