前端问题整理

Posted 2020-11-29 qingsui

1.关于页面在首次加载后不查询分页错误问题（排除首次分页带条件）

有句话说得好：解决问题的思维不能由产生问题的思路去解决！这是个很好的例子：在项目中某个查询页面，首次进入页面的时候将其中所有的数据全数渲染下来，也可以根据查询条件过滤数据，按照先限制 条件，再点击查询，然后分页的 顺序还说，一直没什么问题，但是在首次加载时，选中了其中一些条件，但是没有点击查询，分页的时候还是将查询的条件带过去了再进行的分页，这就很不对劲了！

<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>

在思考的时候，很容易从结果出发去思考怎么跳过首次不带参数的查询与分页，这就是造成思维困局的原因，这样的思路基本上就是死胡同了，是我一开始的 思路，后来在大神的指点下将一个不接收参数的拷贝查询条件的对象作为首次查询的条件，在点击到"查询"按钮的时候再去对这个空 的对象进行赋值，就可以将首次加载和带条件去查询的功能区分开了，这也是程序思维，经验是很有意义的，可以在解决不同问题的方法中综合整理出新问题的解决思路，有学到