前端问题整理

<template>
 <div class="container">
   <el-form ref="searchInfo" :model="form">
     <el-form-item label="城市" prop="form.city">
       <el-select v-model="form.city">
         <el-option v-for="item in cities" :key="item.key" :label="item.value" :value="item.key">
         </el-option>          
       </el-select>
     </el-form-item>
     <el-form-item label="部门" prop="form.dept">
       <el-select v-model="form.dept">
         <el-option v-for="item in depts" :key="item.key" :label="item.value" :value="item.key">
         </el-option>          
       </el-select>
     </el-form-item>
     <el-form-iitem>
      <el-button @click="search"><i class="el-icon-search"></i>查询</el-button>
     </el-form-item>
   </el-form>
   
   <el-table :data="tableData">
     <el-table-column label="姓名" prop="name"/>
     <el-table-column label="报销单号"  prop="no"/>
     <el-table-column label="单据类型" prop="type"/>
     <el-table-column label="单据状态">
       <template slot-scope="scope">
         <span>{{scrop.row.status==1?:"业务审批":"财务审批"}}</span>
       </template>
     </el-table-column>
   </el-table>
   <pagination @pagination="handlePage" :page.sync="pagination.page" :page-limit="pagination.limit" :page-total="pagination.total" :page-sizes="pagination.pageSizes">
 </div>
</template>
<script>
import searchService from "@/api/emp"
 export default{
   data(){
     return{
       form:{
         dept:‘‘,
         city:‘‘
       },
       formData:{
         dept:‘‘,
         city:‘‘
       },
       cities:[
         {key:0,value:‘东京‘},
         {key:1,value:‘北京‘},
         {key:2,value:‘上海‘}
       ],
       depts:[
         {key:0,value:‘运营部‘},
         {key:1,value:‘研发部‘},
         {key:2,value:‘财务部‘}
       ],
       tableData:[],
       pagination:{
         page:1,
         total:0,
         limit:20,
         pageSizes:[20,50,100]
       }
     }
   },
   mounted(){
     this.enterSearch()
   },
   methods:{
     handlePage(val){
       this.pagination.ppage=val.page
       this.pagination.limit=val.limit
   　　this.enterSearch()
     },
     enterSearch(){
       //首次进入页面的时候，查询的是全部的信息
       let json={
         pageCurrent:this.pagination.page,
         pageSize:this.pagination.limit,
         catalog:this.formData
       }
      this.dealSearch(json)
     },
     dealSearch(json){
       //这里集中处理查询
       searchService(json).then(res=>{
         let data=res.data
         //查询到的数据
         this.tableData=data.records
         this.pagination.page=data.pageCurrent //当前页
         this.pagination.limit=data.pageSize  //每页数据
         this.pagination.total=data.rowCount  //总条数
       })
     },
     search(){
       this.formData=this.form
       this.enterSearch()
     }
   }
 }
</script>