本文主要是解决下拉框根据返回值隐藏 动态设置建议列表值等问题
结构写法
<el-autocomplete
v-model.trim="invoiceHeaderInformation.gmfMc"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
type="text"
:popper-class="className"
placeholder="请输入名称"
class="td_inputSearch"
@select="handleSelect"
/>在结构中需要注意的是
:popper-class="className" 用来动态控制下拉框（建议列表）的样式
@select="handleSelect" 用来处理选择了建议列表某一项之后的操作
:fetch-suggestions="querySearch" 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它
定义数据
className:'', // 动态设置远程下拉框的样式
qympArrObject: [], // 远程下拉框的数组集合
timeout: null, // 设置时间
gmfmcItems: [], // 名称
invoiceHeaderInformation:{gmfMc:''} // 双向绑定的数据
方法编写
/** 客户名称搜索 */
querySearch(queryString, cb) {
// 调用 callback 返回建议列表的数据
// cb(results)
this.timeout = setTimeout(() => {
var gmfmcItems = this.gmfmcItems
var results = queryString ? gmfmcItems.filter(this.createFilter(queryString)) : gmfmcItems
cb(results)
}, 1000)
},
由于返回的值有延时加载时间，故而这里的时间设置很重要，必须要设置，否则就显示不出来数据
/** 创建客户名称搜索 */
createFilter(queryString) {
return (gmfmcItems) => {
return (gmfmcItems.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
/** 客户名称搜索下拉框数据定义 */
loadAll() {
var that = this
return that.qympArrObject // 返回请求接口的数据
},/** 接口请求数据方法*/
getList () {
let that = this
that.loading = true;
axios({
url: , // 查询接口 nologin/college
method: 'post',
data: {
}
}).then(res => {
// 在这里来获取返回的数据 this.qympArrObject.push
res.data.forEach((v, index) => {
// 下拉框值进行赋值
that.qympArrObject.push({ 'value': v.qymc }) // 必须是这种格式
})
// 渲染客户名称搜索下拉框的值
this.gmfmcItems = this.loadAll()
}).catch(error => {
this.$notify({
message: error.message,
type: 'error'
})
that.loading = false
throw error
})
},
handleSelect(item) {
const that = this
setTimeout(() => {
// 进行回显数据（远程搜索选择一条数据，对其他数据进行回显操作在这里进行处理）
}
}, 50)监听调用
监听一个对象的方法
'invoiceHeaderInformation.gmfMc': {
handler(newVal, oldVal) {
// 当输入框的值的长度大于1才进行调用接口
if (newVal.length > 1) {
this.getList()
// 当返回的数组没有数据的时候，给远程下拉框添加新的样式
this.className = this.qympArrObject.length>0 ? '' : 'popperClassName'
}else{
// 当输入框的长度小于或等于1的时候，给远程下拉框添加新的样式
this.className = 'popperClassName'
}
},
deep: true
}这里涉及到一个需求定义，如果输入框的值是大于1的开始调用接口，否则就不显示下拉框；如果返回的有数值，显示下拉框，否则就不显示下拉框。
动态样式处理（覆盖elementUI的样式）
<style lang="scss">
// 动态给远程下拉框设置样式
.popperClassName{
display: none !important;
position: static !important;
}
</style>