记录element-ui改造select显示为table，并支持多查询条件

最近遇到的一个需求 ， 很有趣，是需要一个select组件，要求显示工号，员工姓名，以及区域

三个字段，并且要支持三个字段的查询。显然element原生的组件不适用，这时候我们需要改造一下，把option改成一个table的样子，这样就能解决我们的问题 ， 多个搜索条件这里我是一次性拿到所有的数据，然后模糊查询来解决

1.先看效果图 点击select支持输入，选择，以及回车查询

2.实现代码 HTML

 <el-select v-model="value" clearable filterable :filter-method='filterMethod' placeholder="请选择">
   <el-option disabled value="disabled ">
		<div class='saler-mate-list-item disabled-title'>
			<span class='code'>工号</span>
			<span class='name'>姓名</span>
			<span class='spec'>区域</span>
		</div>
	</el-option>

	<template v-if="options && options.length">
	    <el-option
	      v-for="item in options"
	      :key="item.value"
	      :label="item.label"
	      :value="item.value">
			<div class='saler-mate-list-item disabled-title'>
				<span class='code'>{{item.code}}</span>
				<span class='name'>{{item.label}}</span>
				<span class='spec'>{{item.spec}}</span>
			</div>
		</el-option>
	</template>
	<el-option v-else disabled>暂无数据</el-option>
  </el-select>

3. 对应Css

.saler-mate-list-item{
	display: flex;
 	justify-content: space-between;
	align-items:center;
	width:500px;
	padding-left:20px;
}

.name {
	width:45%;
	text-align:left;
	wite-space:nowrap;
	text-overflow:elipsis;
}

.code{
	width:30%;
	text-align:left;
	wite-space:nowrap;
	text-overflow:elipsis;
}

.spec {
	width:25%;
	text-align:left;
	wite-space:nowrap;
	text-overflow:elipsis;
}

4.对应JS

filterMethod(val){
	if(val){
		// 不建议操作原数组
		let newArr = this.options.filter(i => {
		return i.codo.includes(val) || i.name.includes(val) || i.spec.includes(val)})
		this.options = JSON.parse(JSON.stringify(newArr))
	} else {
		// 搜索内容为空时 ， 要把原始数据赛回select中
		this.options = this.dataList
	}
}