管理员界面的表格基本需要搜索,用户页面的发布也需要搜索。
管理员界面的表格搜索非常简单,使用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函数进行分页。