更新package.json,修改vue相关插件的版本号，修改element-ui版本号

package.json

@@ -9,22 +9,23 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "flex.css": "^1.1.6",
     "nprogress": "^0.2.0",
-    "vue": "^2.0.1",
+    "vue": "^2.0.7",
     "vuex": "^2.0.0-rc.6"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",
     "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
+    "babel-loader": "^6.2.8",
     "babel-plugin-transform-runtime": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-2": "^6.0.0",
     "babel-register": "^6.0.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.1.0",
-    "css-loader": "^0.25.0",
-    "element-ui": "^1.0.0",
+    "css-loader": "^0.26.0",
+    "element-ui": "^1.0.2",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -39,13 +40,13 @@
     "semver": "^5.3.0",
     "shelljs": "^0.7.4",
     "url-loader": "^0.5.7",
-    "vue-loader": "^9.4.0",
-    "vue-router": "^2.0.1",
+    "vue-loader": "^9.9.5",
+    "vue-router": "^2.0.3",
     "vue-style-loader": "^1.0.0",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.8.3",
     "webpack-hot-middleware": "^2.12.2",
-    "webpack-merge": "^0.16.0"
+    "webpack-merge": "^0.17.0"
   },
   "engines": {
     "node": ">= 4.0.0",

src/App.vue

@@ -17,6 +17,7 @@ export default {
 
 <style>
 	@import "../node_modules/font-awesome/css/font-awesome.min.css";
+	@import "../node_modules/flex.css/dist/flex.css";
 	.bounce-enter-active {
 		animation: bounce-in .5s;
 	}

src/components/Home.vue

@@ -96,12 +96,12 @@
 			logout:function(){
 				var _this=this;
 				this.$confirm('确认退出吗?', '提示', {
-          type: 'warning'
-        }).then(() => {
-          _this.$router.replace('/login');
-        }).catch(() => {
+					type: 'warning'
+				}).then(() => {
+					_this.$router.replace('/login');
+				}).catch(() => {
 							
-        });
+				});
 
 				
 			}

src/components/nav1/Page1.vue

@@ -19,20 +19,34 @@
 			</el-form>
 		</el-col>
 
-		<el-table :data="tableData" style="width: 100%">
-			<el-table-column prop="date" label="日期" width="180">
-			</el-table-column>
-			<el-table-column prop="name" label="姓名" width="180">
-			</el-table-column>
-			<el-table-column prop="address" label="地址">
-			</el-table-column>
-		</el-table>
+		<template>
+			<el-table :data="tableData" highlight-current-row 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-column inline-template :context="_self" label="操作" width="100">
+					<span>
+					<el-button type="text" size="small">编辑</el-button>
+					<el-button type="text" size="small" @click="handleDel(row)">删除</el-button>
+				</span>
+				</el-table-column>
+			</el-table>
+		</template>
 
-		<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
-			<el-pagination :current-page="5" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
+		<!--<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
+			<el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
 				:total="400" style="float:right">
 			</el-pagination>
-		</el-col>
+		</el-col>-->
 	</section>
 </template>
 
@@ -50,25 +64,56 @@
         },
 				value1:'',
         tableData: [{
-            date: '2016-11-02',
-            name: '123456',
-            address: '123456'
+						id:1000,
+            name: 'lanqy1',
+            sex: 1,
+            age: 20,
+						birth:'1996-03-02',
+						addr:'广东广州天河体育中心'
           }, {
-            date: '2016-11-02',
-            name: '123456',
-            address: '123456'
+						id:1001,
+            name: 'lanqy2',
+            sex: 1,
+            age: 20,
+						birth:'1996-03-02',
+						addr:'广东广州天河体育中心'
           }, {
-            date: '2016-11-02',
-            name: '123456',
-            address: '123456'
+						id:1002,
+            name: 'lanqy3',
+            sex: 0,
+            age: 20,
+						birth:'1996-03-02',
+						addr:'广东广州天河体育中心'
           }, {
-            date: '2016-11-02',
-            name: '123456',
-            address: '123456'
+						id:1003,
+            name: 'lanqy4',
+            sex: 1,
+            age: 20,
+						birth:'1996-03-02',
+						addr:'广东广州天河体育中心'
           }]
      }
     },
     methods: {
+			//性别显示转换
+			formatSex:function(row,column){
+				return row.sex==1?'男':row.sex==0?'女':'未知';
+			},
+			handleDel:function(row){
+				//console.log(row);
+				var _this=this;
+				this.$confirm('确认删除该记录吗?', '提示', {
+					type: 'warning'
+				}).then(() => {
+					for(var i=0;i<_this.tableData.length;i++){
+						if(_this.tableData[i].id==row.id){
+							_this.tableData.splice(i,1);
+						}
+					}
+				}).catch(() => {
+							
+				});
+			}
     }
   }
 </script>