vue模糊查询
vue+element<div class="searchbox"><el-autocompletev-model="accountSearch":fetch-suggestions="accounQuerySearchAsync"@select="accountHandleSelec.
·
vue+element
<div class="searchbox">
<el-autocomplete
v-model="accountSearch"
:fetch-suggestions="accounQuerySearchAsync"
@select="accountHandleSelect"
:debounce=10
placeholder="请输入身份证号/姓名/部门"
>
</el-autocomplete>
<el-button @click="accountFind">搜索</el-button>
</div>
data() {
return {
accountSearch: "",
}
},
method: {
//queryString 为在框中输入的值 callback 回调函数,将处理好的数据推回
accounQuerySearchAsync(queryString, callback) {
let list = [{}];
let param = {
pageNum: 1,
pageSize: 9999,
key: queryString
}
let data = ["Alabama","Alaska","Arizona","QQa","电饭锅的a广泛地","43543我a们是蛋糕",,
"wthdfbfgjtaytyut","是的sdfdfgdgdfgerauaiol","宿舍a的发v","哦们是对方a水电费 是","脂肪s酸该公司","是的个人特a色的若干",];
// let data = this.getAccountUserInfo(param,0);
data.forEach(function(item,i){
if(item.indexOf(queryString) != -1){
list.push({"value":item});
}
})
if(!queryString){
list = list.splice(0,7);
}
callback(list);
},
// 模糊查询下拉框 鼠标键盘选中点击触发
accountHandleSelect(item) {
this.accountSearch = item.value;
},
accountFind: function(){
if(!this.accountSearch){
this.$message({ type: 'warning', message: "请输入要查询的内容!"});
return;
}
let param = {
pageNum: 1,
pageSize: this.accountPagesize,
key: this.accountSearch
}
this.getAccountUserInfo(param,1);
},
getAccountUserInfo: function(param,status){
findUsersAndDepartment(param).then((data) => {
if(data.ret.succeed){
if(status == 0){ // 模糊查询
return data;
}else if(status == 1) { // 获得表格数据
this.$message({
type: 'info',
message: data.ret.retMsg
});
this.accountList = data.page.list;
}
}
})
},
}
<style lang="scss" scoped>
@import '~scss_vars';
.searchbox {
display: inline-block;
width: 250px;
.el-select,.el-autocomplete {
float: left;
input {
padding: 0 10px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.el-button {
float: left;
margin: 0;
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&:hover,&:focus {
border: 1px solid #bfcbd9;
border-left: 0;
color: #1f2d3d;
}
}
}
.search {
display: block;
}
.btn-import {
position: relative;
input {
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
fill-opacity: 0;
cursor: pointer;
}
}
</style>
.search {
display: block;
}
.btn-import {
position: relative;
input {
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
fill-opacity: 0;
cursor: pointer;
}
}
</style>
更多推荐
已为社区贡献9条内容
所有评论(0)