业务需求:只有当用户按下回车键之后,在显示组件的弹出层
一、需要将el-autocomplete挂载到当前的dom节点下
看了el-autocomplete的源码发现,其提供了一个props属性:popperAppendToBody,默认为true,该属性是默认将其挂在到body标签下。如果挂载在body标签下样式穿透不太方便。
二、通过变量控制组件的弹出层是否显示
data() {
return {
// 默认不显示
isShow: true,
// 定义一个变量用来存储el-autocomplete组件用来返回数据的函数
cbFun: null
}
}
<div :class="{'formItemSearch':isShow}">
<el-autocomplete
v-model="form.s_name"
value-key="s_name"
style="width: 100%;"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
:trigger-on-focus="false"
:popper-append-to-body="false"
@keyup.enter.native="enterQuerySearch"
@select="handleSelect"
/>
</div>
样式穿透,通过组件外层的div来控制弹出层是否隐藏
/*
使用v-deep样式穿透,将其隐藏
*/
.formItemSearch::v-deep .el-autocomplete .el-autocomplete-suggestion{
display: none;
}
方法处理
代码如下(示例):
methods: {
// el-autocomplete组件绑定的返回建议的方法
querySearch(query, cb, isShow) {
// 由于业务要求只有用户按下回车才去请求接口,所以需要将cb函数提前存储
this.cbFun = cb
// 定义list变量用来模拟数据接口返回数据为空的情况
const list = [
{
id: 'a-1',
s_number: '无匹配数据',
s_name: '无匹配数据',
m_number: '无匹配数据'
}
]
if (isShow === 1) {
// 用户点击回车时isShow === 1,将组件的弹出层取消隐藏,让用户看到数据正在加载中
this.isShow = false
// 接口请求
getlist({query: query}).then((res) => {
// 判断接口返回的列表是否为空
if (res.cont.length > 0) {
cb(res.cont)
} else {
cb(list)
}
}).catch((e) => {
// 使用catch捕捉接口请求异常的情况
cb(list)
})
}
} else {
// 组件的弹出层继续隐藏
this.isShow = true
}
},
// 绑定回车事件
enterQuerySearch(data) {
// 将提前存储的cbfun赋值给querySearch
this.querySearch(data, this.cbFun, 1)
},
// 点击el-autocomplete组件的弹出层中的数据时触发
handleSelect(resData) {
// 当点击的无匹配数据时,将相关数据重置
if (resData.id !== 'a-1') {
this.form.s_name = resData.s_name
} else {
this.form.s_name = null
this.form.m_number = null
this.form.s_number = null
}
}
}