样式

@@ -87,17 +87,11 @@ export const constantRoutes = [
     redirect: 'noredirect',
     children: [
       {
-        path: 'detail',
+        path: '/destinationFlight/:handle/:id',
         component: (resolve) => require(['@/views/system/destinationFlight/info'], resolve),
-        name: 'Detail',
+        name: 'info',
         meta: { title: '目的航班信息', icon: 'user' }
       },
-      {
-        path: 'update',
-        component: (resolve) => require(['@/views/system/destinationFlight/info'], resolve),
-        name: 'Update',
-        meta: { title: '目的航班信息修改', icon: 'user' }
-      }
     ]
   }
 ]

 <template>
   <div style="margin: 40px">
-    <el-form ref="form" :model="form" label-width="200px">
+    <el-form ref="form" :model="form" label-width="200px" size="small" :disabled="disable">
       <el-form-item label="航班号">
         <el-input
           v-model="form.purposeOfFlightNo"
@@ -99,8 +99,9 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">立即创建</el-button>
-        <el-button>取消</el-button>
+        <el-button type="primary" v-if="$route.params.handle === 'add'" @click="onSubmit">添加</el-button>
+        <el-button type="primary" v-if="$route.params.handle === 'update'" @click="onSubmit">保存</el-button>
+        <el-button @click="close">取消</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -121,16 +122,25 @@ export default {
       cargoType:[],
       cargoStatus:[],
       serviceCode:[],
-      subCategory:[]
+      subCategory:[],
+      disable:false,
     };
   },
   methods: {
     onSubmit() {
       console.log("submit!");
     },
+    close(){
+      
+    }
   },
   created() {
-    let id = this.$route.query.id;
+    let id = this.$route.params.id;
+    let handle = this.$route.params.handle;
+    console.log(handle);
+    if (handle === "detail"){
+      this.disable = true;
+    }
 
     //申报类别
     cargoTypeData().then((response) => {

 <template>
-<div style="margin:40px">
-  <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+<div style="margin:40px" class="app-container"> 
+  <el-form :inline="true" :model="queryParams" class="demo-form-inline" size="small">
     <el-form-item label="航班号">
       <el-input v-model="queryParams.purposeOfFlightNo" placeholder="航班号"></el-input>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+      <el-button type="primary" icon="el-icon-search" @click="getList" size="mini">查询</el-button>
     </el-form-item>
   </el-form>
-  <el-button style="margin-bottom:20px" type="primary" icon="el-icon-plus">添加</el-button>
+  <el-button style="margin-bottom:20px" type="primary" icon="el-icon-plus" size="mini">添加</el-button>
   <el-table
     :data="flyList"
     style="width: 800px"
-     v-loading="loading"
+     v-loading="loading" size="small"
     >
-    <el-table-column
-      prop="purposeOfFlightNo"
-      label="航班号">
-    </el-table-column>
-    <el-table-column
-      label="操作" prop="id">
-       <template slot-scope="scope">
-        <el-button type="text"  @click="handleClick(scope.row.id, 'Detail')">查看</el-button>
-        <el-divider direction="vertical"></el-divider>
-        <el-button type="text" @click="handleClick(scope.row.id, 'Update')">修改</el-button>
-        <el-divider direction="vertical"></el-divider>
-        <el-button type="text">删除</el-button>
-        <el-divider direction="vertical"></el-divider>
-        <el-button type="text">启用</el-button>
-        <el-divider direction="vertical"></el-divider>
-        <el-button type="text">停用</el-button>
+    <el-table-column prop="purposeOfFlightNo" label="航班号" align="center"></el-table-column>
+    <el-table-column label="操作" prop="id" align="center">
+       <template slot-scope="scope" >
+        <el-button type="text" size="mini" icon="el-icon-view"  @click="handleClick(scope.row.id, 'detail')">查看</el-button>
+        <el-button type="text" size="mini" icon="el-icon-edit" @click="handleClick(scope.row.id, 'update')">修改</el-button>
+        <el-button type="text" size="mini" icon="el-icon-delete">删除</el-button>
+        <el-button type="text" size="mini" icon="el-icon-video-play">启用</el-button>
+        <el-button type="text" size="mini" icon="el-icon-video-pause">停用</el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -42,7 +34,8 @@
       layout="prev, pager, next, jumper, sizes, total"
       :total="total"
       background
-      style="margin-top:40px">
+      :hide-on-single-page="true"
+      style="margin-top:40px; text-align:right">
   </el-pagination>
 </div>
 </template>
@@ -83,8 +76,8 @@
       });
       },
       //跳转到查看，修改页面
-      handleClick(flightiId, pageName){
-        this.$router.push({name:pageName,query: {id:flightiId}});
+      handleClick(flightiId, handle){
+        this.$router.push({ name: 'info', params: { handle: handle, id:flightiId }});
       },
       //删除，启用，停用
       changeStatus(id, handle){