1.标签中写法
<el-autocomplete
popper-class="search-people-autocomplete"
style="width:100%"
v-if="addForm.alarmAreaRadio===1"
v-model="addForm.alarmAreaType"
clearable
:fetch-suggestions="querySiteSearch"
placeholder="请输入场站"
@select="handleSiteSelect">
popper-class用于指定搜索下拉框的样式,在scss文件中编辑样式
.search-people-autocomplete {
background:rgba(18,23,32,1);
border: none;
margin-top: 0 !important;
.el-autocomplete-suggestion__wrap {
max-height: 2.2rem;
}
li {
color: rgba(255, 255, 255, .5);
&:hover, &.highlighted {
background: rgba(40, 47, 57, .9);
}
}
.popper__arrow {
display: none;
.rightSpan{
float:right
}
}
:fetch-suggestions为下拉框的查询事件,@select为点击事件
2.选择在下拉框中展示的数据
**//1.在created钩子函数中调用接口,获取siteList,created在页面渲染前加载,只用调用一次接口**
//获取场站列表
api.querySite(paramsC).then((res)=>{
if(res.data.resultCode === 0){
const { data } = res.data.data;
this.alarmAreaListSite = data;
}
}).catch((err) => {
this.$message.error(err && err.data.resultMessage ? err.data.resultMessage : '查询场站失败')
});
**//2.前端对输入字段进行模糊匹配,注意filter时,字段不能为null,需要判null (item.areaName && item.areaName.indexOf(queryString.toString()) > -1)**
//查询场站事件
querySiteSearch(queryString, cb) {
//对输入的内容进行模糊匹配
var results=queryString?this.alarmAreaListSite
.filter(item => (item.areaName && item.areaName.indexOf(queryString.toString()) > -1)
|| (item.siteName && item.siteName.indexOf(queryString.toString()) > -1)):this.alarmAreaListSite
if(results.length===0){
cb([{noResult: true}])
}else{
cb(results)
}
},
**//3.静态页面中数据展示写法**
<!-- 这个地方的item是callback中返回的数组中的每一项数据-->
<template slot-scope="{item}">
<span style="text-align: center;display: block" v-if="item.noResult">无匹配结果</span>
<span v-else>
<span>{{ item.siteName }}</span>
<span class="rightSpan">{{ item.gridLocation }}</span>
</span>
</template>
3.下拉框展示数据,不是最后需要提交的数据,解决方法
//1.点击事件中,传下拉框中的名称,这样点击后输入框中显示的是名称
handleGridSelect(item){
this.addForm.alarmAreaType=item.siteName
}
//2.从上一步得到的List中,由点击事件传入的名称,找到对应的一条数据
const curSelectedSite = this.alarmAreaListSite.find(item => item.siteName === this.addForm.alarmAreaType)
// 3.最后从这条数据中,取需要提交的字段
Num: curSelectedSite.siteCode: '', //编号