111

frontend/src/views/MainPage/activity/activity.vue

@@ -5,43 +5,36 @@
     </el-breadcrumb>
     
     <div class="operation">
-    <el-radio-group v-model="radio1">
+    <el-radio-group v-model="radio1" :change="search()">
       <el-radio-button label="全部活动"></el-radio-button>
       <el-radio-button label="未开始"></el-radio-button>
       <el-radio-button label="进行中"></el-radio-button>
       <el-radio-button label="已结束" style="margin-right:400px"></el-radio-button>
     </el-radio-group>
-
-    <el-input v-model="input" placeholder="请输入内容" style="width: 300px"></el-input>
-    <el-button type="primary" icon="el-icon-search" circle style="margin-left:10px" ></el-button>
+    
     </div>
-    <el-table :data="tableData" style="width: 100%" 
+    <el-table :data="tableData.filter(data => !sear || sear=='全部活动' || data.state.toLowerCase().includes(sear.toLowerCase()) )
+      "style="width: 100%" 
     :header-cell-style="headStyle" 
     :cell-style="rowStyle"
     :header-cell-class-name="headerStyle">
       <el-table-column prop="activityname" label="活动名称"></el-table-column>
-      <el-table-column prop="state" label="状态"></el-table-column>
+      <el-table-column prop="state" label="状态" :filters="[{text: '全部活动', value: '全部活动'}, {text: '未开始', value: '未开始'}, {text: '进行中', value: '进行中'}, {text: '已结束', value: '已结束'}]"
+      :filter-method="filterHandler">
+      </el-table-column>
       <el-table-column prop="date" label="创建日期" ></el-table-column>
       <el-table-column prop="anticipate" label="参与人数" ></el-table-column>
 
-      <el-table-column prop="" label="操作"  > 
-        <template slot-scope="scope">
-          <el-button type="success" @click="handleClick(scope.row)" size="small">预览活动</el-button>
+      <el-table-column align="right" > 
+        <template slot="header" slot-scope="scope">
+        <el-input style="display:none;"
+          v-model="sear"/>
+      </template>
+        <template slot-scope="scope" >
+          <el-button type="primary" @click="handleClick(scope.row)" size="small">预览活动</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <div class="operation">
-      <!-- <el-pagination
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage4"
-        :page-sizes="[10,20]"
-        :page-size="10"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="50">
-      </el-pagination> -->
-    </div>
   </div>
 </template>
 
@@ -51,30 +44,28 @@
         return {
           input: '',
           radio1: '全部活动',
+          sear: '',
+          keysearch: '',
           tableData: [{
             date: '2016-05-02',
-            name: '王小虎',
             activityname: '上海市',
             state:'进行中',
             anticipate:'22',
           },
           {
             date: '2016-05-02',
-            name: '王小虎',
             activityname: '上海市',
             state:'进行中',
             anticipate:'25',
           }, 
           {
             date: '2016-05-02',
-            name: '王小虎',
             activityname: '上海市',
             state:'进行中',
             anticipate:'12',
           }, 
           {
             date: '2016-05-02',
-            name: '王小虎',
             activityname: '上海市',
             state:'进行中',
             anticipate:'52',
@@ -99,6 +90,13 @@
                 path: "/detailactivity",
                 query: { titleid: index },
             });
+        },
+        filterHandler(value, row, column) {
+          const property = column['property'];
+          return row[property] === value;
+        },
+        search() {
+          this.sear = this.radio1;
         }
       }
     }