当前位置：首页 > news >正文

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

news 2025/9/13 0:10:19

最近遇到的一个需求，很有趣，是需要一个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-optionv-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}
}