👉 前言
在 Vue + elementUi 开发中,有时候多次重复的搜索关键词, 可能需要实现热点搜索
或者 关键词搜索
等功能。但是呢,在 elementUi
中,显然没有自带这么一个组件,这时就需要我们去实现了。
👉 一、原理
利用 elementUi 中的el-select的分组,将搜索过的关键词内容,进行分组。方便下次点击。
👉 二、实现案例
> HTML模板
<el-select
v-model="form.keyValue"
placeholder="请选择"
class="hotSelect"
style="margin-left: 20px;width: 100%"
filterable
allow-create
:popper-append-to-body="false"
clearable
@change="queryDataPage"
>
<el-option-group
v-for="group in hotOptions"
:key="group.label"
:label="group.label"
>
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value">
<span>{{ item.value }}</span>
</el-option>
</el-option-group>
</el-select>
> Js内容
// 选项变更
queryDataPage(){
// 进行逻辑操作
},
Data: {
hotOptions: [
{
label:'经常搜索',
options:[]
},
{
label:'热点推荐',
options:[]
},
{
label:'最近更新',
options:[]
}
],
}
> CSS样式
/* 覆盖elementUi 原本的组件样式 */
/deep/ {
.el-select-group{
padding: 0 26px;
.el-select-dropdown__item {
display: inline-block;
margin: 2px 8px 2px;
color: #686868;
padding: 0px;
font-size: 14px;
}
.el-select-dropdown__item:hover{
border-bottom: 1px solid #2a5cb0;
}
}
.el-select-group__title{
font-size: 15px;
color: #ff8000;
font-weight: bold;
}
.el-select-dropdown ul:nth-child(2) .el-select-group__title{
color: #006bcf;
}
.el-select-dropdown ul:nth-child(3) .el-select-group__title{
color: #2dbb62;
}
}
案例较为粗浅,仅供参考! 禁止转载
👉 三、效果演示
往期内容 💨
🔥 < 在 elementUi 中,el-upload 上传组件封装 >