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

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

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

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

2.实现代码 HTML

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

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

javascript 复制代码
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
	}
}
相关推荐
码哥DFS4 分钟前
Flex布局原理
前端·css·css3
小样还想跑20 分钟前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者21 分钟前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者21 分钟前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端
Java水解29 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户3802258598241 小时前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
时间会给答案scidag1 小时前
报错 400 和405解决方案
vue.js·spring boot
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
Web小助手1 小时前
js高级程序设计(日期)
javascript