vue 带检索功能下拉数据组件代码
gooood个人博客网站
数组
1、’组件演示图
2、父级代码
<Hselect :total='options' :val='userForm.orgId' @text="getOrgId"></Hselect>
3、子组件代码
<template>
<div>
<div>
<input type="text" v-model="filterText2" readonly="readonly">
<button></button>
</div>
<ul>
<li>
<input type="text" v-model="filterText" placeholder="请输入...">
</li>
<li>
<ul>
<template v-for="item in filterList">
<li v-text="item.name" @click="selectItem(item)"></li>
</template>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
filterText:"",
filterText2:"",
}
},
props: ['total','val'],
computed: {
//下拉框带搜索功能列表
filterList: function () {
//this.filterValue();
var filterText = this.filterText;
var list = this.total;
return list.filter(function (item) {
return item.name.toLowerCase().indexOf(filterText.toLowerCase()) != -1
});
},
},
watch: {
/*userId() {
this.$emit('text',this.checkedIds);
},*/
'val':'filterValue',
},
mounted:function(){
var _this=this;
$(function(){
$(document).click(function(event){
$(".select-group-open .js-ul").hide();
$(".select-group-open").click(function(event){
$(".select-group-open .js-ul").hide();
$(this).find(".js-ul").show();
event.stopPropagation();
})
})
})
},
methods:{
selectItem(item){
$(".select-group-open .js-ul").hide();
event.stopPropagation();
this.filterText2=item.name;
this.$emit('text',item);
},
filterValue(){
for(var i=0; i<this.total.length; i++){
if(this.total[i].id==this.val){
this.filterText2 = this.total[i].name;
return;
};
}
this.filterText2="";
}
}
}
</script>
<style scoped>
.select-group-open li.first{height: 53px;}
</style>