树形菜单配合element-ui模糊搜索和鼠标单击选择内容变色并且滚动
基本HTML结构如下:
```
<div class="left_search"> <!-- 供应商模糊搜索 --> <el-form-item> <el-autocomplete class="inline-input" v-model="filters.hospitalname" :fetch-suggestions="querySearch" placeholder="请输入医院名称" clearable @select="Select" //搜索下拉选择 ></el-autocomplete> </el-form-item> <p class="borderScroll"></p> <!-- 医院列表 --> <div class="scroll" ref=“box”> <ul> <li v-for="(item,index) in hopitalList" :key="index" @click="selectGoods(item.hospitalid);changeClass(index)" class="hovalColor" :class="{active:index==isActive || item.hospitalname == isActive}" >{{item.hospitalname}}</li> </ul> </div> </div>
```
data(){
return {
isActive: 0,
}
}
Select(val) {
let id = null;
this.hopitalList.forEach(item => {
if (val.value.toString() == item.hospitalname) {
this.isActive = item.hospitalname;
id = item.hospitalid;
}
});this.search();
},
changeClass(index) {
this.isActive = index;
},
//CSS如下
.active {
background: #edf0f5;
height: 62px;
border-left: 5px solid #0d99fd;
}
.hovalColor {
padding: 20px 0 5px 0;
}
本文来自博客园,作者:云霄紫潭,转载请注明原文链接:https://www.cnblogs.com/0520euv/p/12183180.html