项目实训5——搜索

  管理员界面的表格基本需要搜索，用户页面的发布也需要搜索。
  管理员界面的表格搜索非常简单，使用element ui的table自带的search就可以实现搜索。表格的最后一列为搜索框所在列，如果有对表格的操作，可以把操作放在这一列中，如下所示：

      <el-table-column
        align="center">
        <template slot="header" slot-scope="">
          <el-input
            v-model="search"
            size="mini"
            @input="totalCount=tableData.filter(data => !search || data.auname.toLowerCase().includes(search.toLowerCase())).length"
            placeholder="输入申请人信息搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleClick(scope.$index, scope.row)">查看详情</el-button>
        </template>
      </el-table-column>

搜索后需要使用filter函数过滤掉非搜索的内容，代码如下：

    <el-table
      :data="tableData.filter(data => !search || data.auname.toLowerCase().includes(search.toLowerCase())).slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      border
      style="width: 100%">

slice函数对应分页功能，进行搜索后，对搜索结果再分页。但是这里会出现一个问题，即分页组件的总页数不会改变。我尝试多次后发现，可以对搜索框进行input监听，如果有内容输入，则totalCount由过滤后的数据的条数确定，@input=“totalCount=tableData.filter(data => !search || data.auname.toLowerCase().includes(search.toLowerCase())).length”。这样就可以正确实现搜索后的分页。
  用户界面的发布也可以用上述方式进行搜索以及搜索后正确分页。发布的内容以el-card的形式，el-col的方式排列在页面上，搜索框不属于排列的一部分，但是搜索原理相同。在排列的div上方添加一个搜索的input框，也使用@input进行监听totalCount，如下所示：

<el-input
  v-model="search"
  size="mini"
  @input="totalCount=items.filter(data => !search ||data.pdes.toLowerCase().includes(search.toLowerCase())).length"
  placeholder="输入申请信息关键字搜索"
  style="width: 20%; margin-bottom: 10px"
/>
//以下是排列内容，上一篇博客中有提到
<div class="listBox" id="mainArea"  style="padding:15px;overflow-y: scroll;" >
  <el-row :gutter="16">
    <el-col :span="8" v-for="item in items.filter(data => !search || data.pdes.toLowerCase().includes(search.toLowerCase())).slice((currentPage - 1) * pageSize, currentPage * pageSize)" v-bind:key="item.id"   style="margin-bottom:25px;'">

不管是tableData还是item，都先用filter函数过滤掉非搜索的内容，然后再用slice函数进行分页。