el-input、el-date-picker、el-select搜索框筛选数据

1、表格样式.

<div class="deploy-searchInput">

<el-input

class="deploy"

v-model="deployList.name"

placeholder="请输入人员姓名、身份证号、行业"

clearable

@input="handleSearchName"

></el-input>

<el-date-picker

v-model="searchTime"

@change="handleSearchTime"

placeholder="请输入检验时间搜索"

type="datetimerange"

start-placeholder="开始日期"

end-placeholder="结束日期"

style="width: 230px; margin-left: 20px"

>

</el-date-picker>

<el-select

clearable

v-model="deployList.checkResult"

placeholder="选择核查结果"

style="margin-left: 20px"

class="checkRes deploy-right"

@change="handleSearchResult"

>

<el-option

v-for="item in checkOption"

:key="item.value"

:label="item.label"

:value="item.value"

>

</el-option>

</el-select>

<el-select

clearable

v-model="deployList.disposeStatus"

placeholder="选择处置状态"

class="checkStatus deploy-right"

@change="handleSearchStatus"

>

<el-option

v-for="item in disposeOption"

:key="item.value"

:label="item.label"

:value="item.value"

></el-option>

</el-select>

<span class="deploy-search-btn deploy-right" @click="search">搜索</span>

</div>

</div>

2、均有change事件 【change 仅在输入框失去焦点或用户按下回车时触发】

3、

/**

* 点击搜索人员姓名

*/

handleSearchName(name) {

this.deployList.name = name;

this.deployList.page = 1;

this.fetchData();

},

/**

* 点击搜索核验时间

*/

handleSearchTime(time) {

if (time != null) {

this.deployList.startData = time[0];

this.deployList.endData = time[0];

} else {

this.deployList.startData = "";

this.deployList.endData = "";

}

this.deployList.page = 1;

this.fetchData();

},

/**

* 点击搜索核验结果

*/

handleSearchResult(checkResult) {

this.deployList.checkResult = checkResult;

this.deployList.page = 1;

this.fetchData(); // 重新调取表格接口数据

},

/**

* 点击搜索处置状态

*/

handleSearchStatus(disposeStatus) {

this.deployList.disposeStatus = disposeStatus;

this.deployList.page = 1;

this.fetchData();

},