＜ elementUi 组件封装： 封装 el-select 组件，实现关键词（经常搜索、热点搜索）提示 ＞

---

前言

在 Vue + elementUi 开发中，有时候多次重复的搜索关键词， 可能需要实现热点搜索 或者 关键词搜索等功能。但是呢，在 elementUi 中，显然没有自带这么一个组件，这时就需要我们去实现了。

一、原理

利用 elementUi 中的el-select的分组，将搜索过的关键词内容，进行分组。方便下次点击。

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 上传组件封装 ＞

＜ 今日份知识点：web常见的攻击方式（网络攻击）有哪些？如何预防？如何防御呢 ？ ＞

＜ 可视化图表技巧：实现发光（荧光）折线图 ＞

＜ 性能提升 Get √ ：如何理解 “ 回流 ” 与 “ 重绘 ” ？如何合理的减少其出现呢 ？ ＞