代码
按钮
<el-button type="text" style="position: absolute;top:-48px;right:260px;z-index: 99;color: #000;"
@click="handleButtonClick('搜索'), showConfirmationModal2()" :class="{ 'blue-text': activeButton === '搜索' }">
<img src="../../assets/svg/搜索.svg" style="width: 1.2vw;" />搜索
</el-button>
搜索模态框
<!-- 搜索模态框 -->
<div style="z-index: 1001;position: relative;">
<el-dialog v-model="modalVisible2" title="搜索" @close="handleModalClose2">
<div>
<span>请输入搜索内容:</span>
<el-input v-model="keyword"></el-input>
</div>
<div style="display: flex; justify-content: space-between;">
<el-button @click="handleCancel2">取消</el-button>
<el-button type="primary" @click="handleConfirm2">确定</el-button>
</div>
</el-dialog>
</div>
js代码
//查询
var keyword = ref()
// 定义一个函数,用于模糊查询
function searchMessages() {
// 使用filter()方法进行筛选
const result = datas.value.filter(item => {
// 使用正则表达式匹配关键字
const regex = new RegExp(keyword.value, 'i');
// 在标题和内容中查找匹配的项
return regex.test(item.title) || regex.test(item.content);
});
// 返回查询结果
return result;
}
const modalVisible2 = ref(false)
// 点击按钮显示模态框
const showConfirmationModal2 = () => {
modalVisible2.value = true;
}
// 用户点击取消按钮
const handleCancel2 = () => {
fetchData1()
modalVisible2.value = false;
}
// 用户点击确定按钮
const handleConfirm2 = () => {
data.value = [];
data1.value = [];
data2.value = [];
// 调用相应的方法,进行设置
console.log(datas.value)
datas.value = searchMessages();
console.log(datas.value)
datas.value.forEach(item => {
console.log(item)
switch (item.typeid) {
case 0:
data.value.push(item);
break;
case 1:
data1.value.push(item);
break;
case 2:
data2.value.push(item);
break;
}
});
// 关闭模态框
modalVisible2.value = false;
}
// 处理模态框关闭事件
const handleModalClose2 = () => {
// 处理模态框关闭时的逻辑
modalVisible2.value = false;
}
核心代码
使用filter以及正则i对数据进行处理
const result = datas.value.filter(item => {
// 使用正则表达式匹配关键字
const regex = new RegExp(keyword.value, ‘i’);
// 在标题和内容中查找匹配的项
return regex.test(item.title) || regex.test(item.content);
});