实现数据全字段搜索

代码

按钮

          <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>
1
2
3
4

搜索模态框

<!-- 搜索模态框 -->
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

核心代码

使用filter以及正则i对数据进行处理

const result = datas.value.filter(item => {
// 使用正则表达式匹配关键字
const regex = new RegExp(keyword.value, ‘i’);
// 在标题和内容中查找匹配的项
return regex.test(item.title) || regex.test(item.content);
});