假设我还是用elementui的el-select，我可以在页面里面用一个值记录此时用户输入的值吗？我需要这个值去做一些事情，比如说当用户输入值之后我的option中需要高亮用户输入的部分。
Element UI Select 搜索值记录与高亮实现
我将为您实现一个基于Element UI的解决方案，记录用户搜索值并在选项中高亮匹配部分。这个实现完全保留了Element UI的原生样式和功能，同时增加了搜索值记录和高亮功能。
实现思路
- 使用
filterable属性启用搜索功能 - 通过
filter-method捕获用户输入值 - 在自定义渲染中高亮匹配文本
- 添加视觉反馈增强用户体验
完整实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element UI Select 搜索值记录与高亮</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
body {
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4ecfb 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
color: #606266;
}
.container {
max-width: 800px;
width: 100%;
background: white;
border-radius: 12px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
padding: 30px;
}
.header {
text-align: center;
margin-bottom: 40px;
}
h1 {
color: #409EFF;
font-size: 32px;
margin-bottom: 10px;
}
.subtitle {
color: #909399;
font-size: 16px;
margin-bottom: 30px;
}
.card {
background: #f9fafc;
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.card-title {
display: flex;
align-items: center;
margin-bottom: 15px;
color: #409EFF;
font-weight: 600;
}
.card-title i {
margin-right: 10px;
font-size: 20px;
}
.demo-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.demo-item {
flex: 1;
}
.highlighted-text {
color: #409EFF;
font-weight: bold;
}
.info-box {
background: #ecf5ff;
border-left: 4px solid #409EFF;
padding: 15px;
border-radius: 0 4px 4px 0;
margin-top: 20px;
}
.info-title {
font-weight: 600;
margin-bottom: 8px;
color: #409EFF;
}
.info-content {
font-size: 14px;
line-height: 1.6;
}
.current-search {
margin-top: 15px;
padding: 10px;
background: #f0f9eb;
border-radius: 4px;
font-size: 14px;
}
.current-search span {
font-weight: bold;
color: #67C23A;
}
.footer {
text-align: center;
margin-top: 30px;
color: #909399;
font-size: 14px;
}
@media (max-width: 768px) {
.demo-row {
flex-direction: column;
}
}
</style>
</head>
<body>
<div id="app" class="container">
<div class="header">
<h1>Element UI Select 搜索值记录</h1>
<p class="subtitle">记录用户搜索值并高亮匹配文本</p>
</div>
<div class="card">
<div class="card-title">
<i class="el-icon-search"></i>
<h2>高亮匹配选项</h2>
</div>
<div class="demo-row">
<div class="demo-item">
<el-select
v-model="selectedValue"
filterable
:filter-method="handleFilter"
placeholder="请选择国家"
style="width: 100%">
<el-option
v-for="item in filteredCountries"
:key="item.value"
:label="item.label"
:value="item.value">
<span v-html="highlightMatch(item.label)"></span>
</el-option>
</el-select>
</div>
<div class="demo-item">
<el-select
v-model="selectedCity"
filterable
:filter-method="handleCityFilter"
placeholder="请选择城市"
style="width: 100%">
<el-option
v-for="city in filteredCities"
:key="city.value"
:label="city.label"
:value="city.value">
<span v-html="highlightMatch(city.label, citySearch)"></span>
</el-option>
</el-select>
</div>
</div>
<div class="current-search">
<i class="el-icon-info"></i>
当前搜索值: <span>{{ currentSearch }}</span>
</div>
<div class="info-box">
<div class="info-title">实现原理</div>
<div class="info-content">
<p>1. 使用 <code>filterable</code> 属性启用搜索功能</p>
<p>2. 通过 <code>filter-method</code> 捕获用户输入值</p>
<p>3. 在自定义渲染中使用 <code>v-html</code> 高亮匹配文本</p>
<p>4. 将搜索值存储在变量中用于其他业务逻辑</p>
</div>
</div>
</div>
<div class="card">
<div class="card-title">
<i class="el-icon-document"></i>
<h2>搜索值应用场景</h2>
</div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="用户" width="180">
<template slot-scope="scope">
<span v-html="highlightName(scope.row.name)"></span>
</template>
</el-table-column>
<el-table-column prop="email" label="邮箱">
<template slot-scope="scope">
<span v-html="highlightEmail(scope.row.email)"></span>
</template>
</el-table-column>
<el-table-column prop="role" label="角色" width="180">
<template slot-scope="scope">
<span v-html="highlightRole(scope.row.role)"></span>
</template>
</el-table-column>
</el-table>
<div class="demo-row" style="margin-top: 20px;">
<el-input
v-model="tableSearch"
placeholder="搜索表格内容..."
prefix-icon="el-icon-search"
style="width: 100%">
</el-input>
</div>
</div>
<div class="footer">
<p>Element UI Select 搜索值记录 | Vue 实现 | 高亮匹配文本</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
selectedValue: '',
selectedCity: '',
currentSearch: '',
citySearch: '',
tableSearch: '',
countries: [
{ value: 'cn', label: '中国' },
{ value: 'us', label: '美国' },
{ value: 'jp', label: '日本' },
{ value: 'kr', label: '韩国' },
{ value: 'uk', label: '英国' },
{ value: 'fr', label: '法国' },
{ value: 'de', label: '德国' },
{ value: 'it', label: '意大利' },
{ value: 'ru', label: '俄罗斯' },
{ value: 'ca', label: '加拿大' }
],
cities: [
{ value: 'bj', label: '北京' },
{ value: 'sh', label: '上海' },
{ value: 'gz', label: '广州' },
{ value: 'sz', label: '深圳' },
{ value: 'cd', label: '成都' },
{ value: 'cq', label: '重庆' },
{ value: 'hz', label: '杭州' },
{ value: 'nj', label: '南京' },
{ value: 'wh', label: '武汉' },
{ value: 'xa', label: '西安' }
],
filteredCountries: [],
filteredCities: [],
tableData: [
{ name: '张三', email: 'zhangsan@example.com', role: '管理员' },
{ name: '李四', email: 'lisi@example.com', role: '编辑' },
{ name: '王五', email: 'wangwu@example.com', role: '订阅者' },
{ name: '赵六', email: 'zhaoliu@example.com', role: '管理员' },
{ name: '钱七', email: 'qianqi@example.com', role: '编辑' }
]
}
},
mounted() {
// 初始化选项
this.filteredCountries = [...this.countries];
this.filteredCities = [...this.cities];
},
methods: {
// 处理国家搜索
handleFilter(query) {
this.currentSearch = query;
if (query) {
this.filteredCountries = this.countries.filter(item =>
item.label.toLowerCase().includes(query.toLowerCase())
} else {
this.filteredCountries = [...this.countries];
}
},
// 处理城市搜索
handleCityFilter(query) {
this.citySearch = query;
if (query) {
this.filteredCities = this.cities.filter(city =>
city.label.toLowerCase().includes(query.toLowerCase()))
} else {
this.filteredCities = [...this.cities];
}
},
// 高亮匹配文本
highlightMatch(text, searchText = this.currentSearch) {
if (!searchText) return text;
// 转义特殊字符
const escapedQuery = searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`(${escapedQuery})`, 'gi');
return text.replace(regex, '<span class="highlighted-text">$1</span>');
},
// 高亮表格中的名称
highlightName(name) {
return this.highlightMatch(name, this.tableSearch);
},
// 高亮表格中的邮箱
highlightEmail(email) {
return this.highlightMatch(email, this.tableSearch);
},
// 高亮表格中的角色
highlightRole(role) {
return this.highlightMatch(role, this.tableSearch);
}
}
});
</script>
</body>
</html>
核心功能实现
1. 记录搜索值
通过filter-method属性捕获用户输入：
handleFilter(query) {
this.currentSearch = query; // 保存搜索值
// 过滤逻辑...
}
2. 高亮匹配文本
使用自定义渲染函数高亮匹配部分：
highlightMatch(text) {
if (!this.currentSearch) return text;
// 转义特殊字符
const escapedQuery = this.currentSearch.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`(${escapedQuery})`, 'gi');
return text.replace(regex, '<span class="highlighted-text">$1</span>');
}
3. 在选项中使用高亮
<el-option
v-for="item in filteredCountries"
:key="item.value"
:label="item.label"
:value="item.value">
<span v-html="highlightMatch(item.label)"></span>
</el-option>
4. 搜索值复用
将搜索值存储在变量中，可在其他业务逻辑中使用：
// 示例：在表格中应用相同的搜索值
highlightName(name) {
return this.highlightMatch(name, this.tableSearch);
}
解决的关键问题
- 安全渲染：使用正则表达式转义用户输入，避免XSS攻击
- 大小写不敏感：通过
toLowerCase()实现不区分大小写的匹配 - 特殊字符处理：正确转义正则表达式特殊字符
- 多组件隔离：为每个Select组件维护独立的搜索值状态
- 响应式更新：确保搜索值变化时UI自动更新
实际应用场景
- 在大型选项列表中增强搜索体验
- 在相关组件中复用搜索值（如示例中的表格过滤）
- 实现搜索历史记录功能
- 基于搜索值展示相关提示信息
- 复杂数据过滤场景
这个实现完全保留了Element UI的原生样式和交互体验，同时添加了强大的搜索值记录和高亮功能，满足您的业务需求。
posted on 2025-06-25 20:40 fox_charon 阅读(42) 评论(0) 收藏 举报
浙公网安备 33010602011771号