add search examples

src/App.vue

@@ -91,4 +91,13 @@
 		vertical-align: baseline;
 		margin-right: 10px;
 	}
+
+	.toolbar .el-form-item {
+		margin-bottom: 10px;
+	}
+	
+	.toolbar {
+		background: #fff;
+		padding: 10px 10px 0px 10px;
+	}
 </style>

src/api/api.js

@@ -3,3 +3,5 @@ import axios from 'axios';
 let base = '';
 
 export const requestLogin = params => { return axios.post(`${ base }/login`, params).then(res => res.data); };
+
+export const getUserList = params => { return axios.get(`${ base }/user/list`, {params: params}); };

src/main.js

@@ -14,7 +14,7 @@ import Home from './pages/Home.vue'
 import Main from './pages/Main.vue'
 import Table from './pages/nav1/Table.vue'
 import Form from './pages/nav1/Form.vue'
-import Page3 from './pages/nav1/Page3.vue'
+import user from './pages/nav1/user.vue'
 import Page4 from './pages/nav2/Page4.vue'
 import Page5 from './pages/nav2/Page5.vue'
 import Page6 from './pages/nav3/Page6.vue'
@@ -44,7 +44,7 @@ const routes = [
       //{ path: '/main', component: Main },
       { path: '/table', component: Table, name: 'Table' },
       { path: '/form', component: Form, name: 'Form' },
-      { path: '/page3', component: Page3, name: '页面3' },
+      { path: '/user', component: user, name: '列表' },
     ]
   },
   {

src/mock/mock.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { LoginUsers } from '../mockdata/user';
+import { LoginUsers, Users } from '../mockdata/user';
 
 export default {
   /**
@@ -37,7 +37,22 @@ export default {
           } else {
             resolve([200, { code: 500, msg: '用户名或密码错误!!!' }]);
           }
-        }, Math.random() * 1000 + 1000);
+        }, 500);
+      });
+    });
+
+    mock.onGet('/user/list').reply(config => {
+      let {name} = config.params;
+      let mockUsers = Users.filter(user => {
+        if (name && user.name.indexOf(name) == -1) return false;
+        return true;
+      });
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve([200, {
+            users: mockUsers
+          }]);
+        }, 500);
       });
     });
 

src/mockdata/user.js

@@ -8,18 +8,18 @@ const LoginUsers = [
   }
 ];
 
-// const Users = [];
-// const userCount = 200;
+const Users = [];
+const userCount = 8;
 
-// for (let i = 0; i < userCount; i++) {
-//   Users.push(Mock.mock({
-//     id: Mock.Random.guid(),
-//     name: Mock.Random.cname(),
-//     address: Mock.mock('@county(true)'),
-//     'age|18-60': 1,
-//     date: Number(Mock.Random.datetime('T'))
-//   }));
-// }
+for (let i = 0; i < userCount; i++) {
+  Users.push(Mock.mock({
+    id: Mock.Random.guid(),
+    name: Mock.Random.cname(),
+    addr: Mock.mock('@county(true)'),
+    'age|18-60': 1,
+    birth: Mock.Random.date(),
+    sex: Mock.Random.integer(0, 1)
+  }));
+}
 
-//export { LoginUsers, Users };
-export { LoginUsers };
+export { LoginUsers, Users };

src/pages/nav1/Page3.vue

@@ -1,28 +0,0 @@
-<template>
-	<el-tabs style="width:100%;" type="card" @tab-click="handleClick" @tab-remove="handleRemove">
-		<el-tab-pane label="用户管理">
-			<el-col :span="24" style="padding:10px;">
-				<el-steps :space="100" direction="vertical" :active="1">
-					<el-step title="步骤 1"></el-step>
-					<el-step title="步骤 2"></el-step>
-					<el-step title="步骤 3"></el-step>
-				</el-steps>
-			</el-col>
-		</el-tab-pane>
-		<el-tab-pane label="配置管理">222</el-tab-pane>
-		<el-tab-pane label="角色管理">333</el-tab-pane>
-		<el-tab-pane label="定时任务补偿">444</el-tab-pane>
-	</el-tabs>
-</template>
-<script>
-  export default {
-    methods: {
-      handleRemove(tab) {
-        console.log(tab);
-      },
-      handleClick(tab) {
-        console.log(tab);
-      }
-    }
-  };
-</script>

src/pages/nav1/Table.vue

@@ -2,7 +2,7 @@
 	<section>
 		<!--工具条-->
 		<el-col :span="24" class="toolbar">
-			<el-form :inline="true" :model="formInline" class="demo-form-inline">
+			<el-form :inline="true" :model="formInline">
 				<el-form-item>
 					<el-input v-model="formInline.user" placeholder="姓名"></el-input>
 				</el-form-item>
@@ -292,12 +292,4 @@
 </script>
 
 <style scoped>
-	.toolbar .el-form-item {
-		margin-bottom: 10px;
-	}
-	
-	.toolbar {
-		background: #fff;
-		padding: 10px 10px 0px 10px;
-	}
 </style>

src/pages/nav1/user.vue

@@ -0,0 +1,73 @@
+<template>
+	<section>
+		<!--工具条-->
+		<el-col :span="24" class="toolbar">
+			<el-form :inline="true" :model="filters">
+				<el-form-item>
+					<el-input v-model="filters.name" placeholder="姓名"></el-input>
+				</el-form-item>
+				<el-form-item>
+					<el-button v-on:click="getUser">查询</el-button>
+				</el-form-item>
+			</el-form>
+		</el-col>
+
+		<!--列表-->
+		<template>
+			<el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;">
+<el-table-column type="index" width="50">
+</el-table-column>
+<el-table-column prop="name" label="姓名" width="180" sortable>
+</el-table-column>
+<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
+</el-table-column>
+<el-table-column prop="age" label="年龄" width="100" sortable>
+</el-table-column>
+<el-table-column prop="birth" label="生日" width="180" sortable>
+</el-table-column>
+<el-table-column prop="addr" label="地址" sortable>
+</el-table-column>
+</el-table>
+</template>
+
+</section>
+</template>
+<script>
+	import { getUserList } from '../../api/api';
+	export default {
+		data() {
+			return {
+				filters: {
+					name: ''
+				},
+				loading: false,
+				users: [
+				]
+			}
+		},
+		methods: {
+			//性别显示转换
+			formatSex: function (row, column) {
+				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
+			},
+			//获取用户列表
+			getUser: function () {
+				let para = {
+					name: this.filters.name
+				};
+				this.loading = true;
+				getUserList(para).then((res) => {
+					this.users = res.data.users;
+					this.loading = false;
+				});
+			}
+		},
+		mounted() {
+			this.getUser();
+		}
+	};
+</script>
+
+<style scoped>
+	
+</style>