记录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
	}
}
相关推荐
然我1 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆1 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder9 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang16 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol25 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
The_era_achievs_hero29 分钟前
微信131~140
开发语言·javascript·微信
然我34 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林2 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
工业甲酰苯胺8 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构