搜索框几种样式

筛选框：
1）下拉框：是否的选择、状态的选择
2）文本框：区域的选择
3）日期选择框：三种，一种日期选择、一种日期段选择、一种时间段选择
4）联想输入下拉框：平台公司、普通公司
5）联想文本框：车牌号码、乘客姓名、订单编号

统一点击查询按钮后查询（区域选择除外）

PS：gd.后面的都是我封装好的接口

#####搜索下拉框-----输入3个关键字

<FormItem label="车牌号码">

<Select v-model="requestParams.carNumber" filterable remote :remote-method="getDropDownCars" :loading="loading">

<Option v-for="(option, index) in cars" :value="option.carNumber" :key="index">{{option.carNumber}}</Option>

</Select>

</FormItem>

getDropDownCars(value) {

if (!value) return

var length = 0

try {

length = value.trim().length

} catch (error) {

length = value.replace(/^\s+|\s+$/gm, '').length

}

if (length < 3) {

this.cars = []

this.keyCars = []

this.loading = false

return

}

this.loading = true

var params = {

type: 1,

carNumber: value

}

api.axios_http(gd.dropDownCars, params).then(res => {

this.loading = false

this.cars = res.returnParm

this.keyCars = res.returnParm

})

},

###########################车辆所有人#################################################################

<FormItem label="车辆所有人">

<Select  v-model="requestParams.ownerName" filterable remote :remote-method="getDropDownOwners" :loading="loading">

        <Option v-for="(option, index) in owners" :value="option.value" :key="index">{{option.label}}</Option>

</Select>

</FormItem>

getDropDownOwners(value) {

if (!value) return

var length = 0

try {

length = value.trim().length

} catch (error) {

length = value.replace(/^\s+|\s+$/gm, '').length

}

if (length < 3) {

this.owners = []

this.loading = false

return

}

this.loading = true

var params = {

type: 1,

driverName: value

}

api.axios_http(gd.dropDownDriver, params).then(res => {

this.loading = false

this.owners = res.returnParm

})

},

#####################################################################################################

#####搜索文本框---模糊查询

对于模糊查询，一般都是传关键字给后端，由后端来做。

<label class="mr-sm-2">车牌号码：</label>

<b-form-input v-model="carNumber"></b-form-input>

#####模糊搜索是输入几个字之后就去请求后台，联想搜索框。可以根据前一个条件筛选出数据，又可以根据自己输入的数据向后台查询数据。

<FormItem label="车牌号码：">

<Select v-model="carNumber" filterable remote :remote-method="remoteCarNumberMethod" :loading="loadingCarNumber">

<Option v-for="(option,index) in carNumberOptions" v-bind:value="option.carNumber" :key="index">

{{ option.carNumber }}

</Option>

</Select>

</FormItem>

remoteCarNumberMethod (query) {

if (query !== '' && query.length >= 3) {

this.loadingCarNumber = true;

setTimeout(() => {

this.loadingCarNumber = false;

// selectCarNumberList 跟后台请求数据时的数组

const list = this.selectCarNumberList.map(item => {

return {

carNumber: item.carNumber

};

});

//  carNumberOptions 下拉框select v-for的数组

this.carNumberOptions = list.filter(item => item.carNumber.toLowerCase().indexOf(query.toLowerCase()) > -1);

}, 200);

} else {

this.carNumberOptions = [];

}

},

},

watch: {

currentPage: function() {

this.getPersonCarList()

},

companyId: function() {

if (this.companyId == '') {

this.selectCarNumberList = []

return

}

this.selectAllCarNumber()

}

}