我的任务组件优化

src/components/common/BottomForm/MyMission.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 我的任务弹窗 -->
-  <el-dialog title="我的任务" :visible.sync="dialogVisible" width="80%" height="80%" :before-close="handleClose">
+  <el-dialog title="我的任务" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
     <el-form :inline="true" ref="myTaskForm" :model="formInline" class="demo-form-inline">
       <el-form-item label="任务类型">
         <el-select v-model="formInline.taskType" placeholder="任务类型">
@@ -19,21 +19,20 @@
           <el-option label="未审核" value="NotReviewed"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item style="float:right;">
+      <el-form-item style="float: right">
         <el-button type="primary" @click="onSubmit">查询</el-button>
         <el-button @click="resetForm()">重置</el-button>
       </el-form-item>
     </el-form>
-    <el-table :data="tableData" style="width: 100%" stripe>
-      <el-table-column fixed prop="date" label="日期" width="150"> </el-table-column>
-      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
-      <el-table-column prop="province" label="省份" width="120"> </el-table-column>
-      <el-table-column prop="city" label="市区" width="120"> </el-table-column>
-      <el-table-column prop="address" label="地址" width="300"> </el-table-column>
-      <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
-      <el-table-column fixed="right" label="操作" width="120">
+    <el-table :data="tableData" style="width: 100%" height="50vh" stripe>
+      <el-table-column fixed prop="taskId" label="任务编号"> </el-table-column>
+      <el-table-column prop="taskName" label="任务名称"> </el-table-column>
+      <el-table-column prop="createDate" label="创建时间"> </el-table-column>
+      <el-table-column prop="state" label="状态"> </el-table-column>
+      <el-table-column prop="taskType" label="任务类型"> </el-table-column>
+      <el-table-column fixed="right" label="操作">
         <template slot-scope="scope">
-          <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 查看 </el-button>
+          <el-button @click.native.prevent="ToView(scope.$index, tableData)" type="text" size="small"> 查看 </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -135,60 +134,81 @@ export default {
       // 我的任务form表单
       tableData: [
         {
-          date: "2016-05-03",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1518 弄",
-          zip: 200333
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
         },
         {
-          date: "2016-05-02",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1518 弄",
-          zip: 200333
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
         },
         {
-          date: "2016-05-04",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1518 弄",
-          zip: 200333
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
         },
         {
-          date: "2016-05-01",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1518 弄",
-          zip: 200333
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
         },
         {
-          date: "2016-05-08",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1518 弄",
-          zip: 200333
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
         },
         {
-          date: "2016-05-06",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1518 弄",
-          zip: 200333
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
         },
         {
-          date: "2016-05-07",
-          name: "王小虎",
-          province: "上海",
-          city: "普陀区",
-          address: "上海市普陀区金沙江路 1518 弄",
-          zip: 200333
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
+        },
+        {
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
+        },
+        {
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
+        },
+        {
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
+        },
+        {
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
         }
       ]
     };
@@ -232,8 +252,9 @@ export default {
       };
       this.onSubmit();
     },
-    deleteRow(index, rows) {
-      rows.splice(index, 1);
+    // 查看
+    ToView(index, rows) {
+      console.log(rows,index);
     },
     // 当用户点击svg底座时，切换底部菜单显示隐藏状态。
     changeShowBottomMenusStatus() {