vue实现的前端模糊匹配搜索

vue实现的前端模糊匹配搜索

可以借助js自带的filter方法和正则表达式来筛选我们需要的元素

首先构建html框架:

<div id="app">
    <div class="wrapper">
      <input type="text" v-model="searchText"><button @click="submit">搜索</button>
    </div>
    <table>
      <thead>
        <th>名称</th>
        <th>价格</th>
        <th>备注</th>
      </thead>
      <tbody>
        <tr v-for="(item,index) in data" :key="index">
          <td>{{item.label}}</td>
          <td>¥{{item.price}}</td>
          <td>{{item.desc}}</td>
        </tr>
      </tbody>
    </table>
  </div>

用户输入的内容动态绑定在变量searchText上,用户点击搜索触发submit方法,我们将searchText变量作为正则表达式的检测标准:

submit() {
      let text = this.searchText
      let reg = new RegExp(text) //声明正则变量
      this.data = this.tableData.filter(item => reg.test(item.label)) //返回
    }

这里使用了data变量用于存储搜索后的结果(以及绑定到表格上渲染),tableData存储表格的原始数据,目的是当用户输入空格时可以还原所有数据,this.tableData.filter(item => reg.test(item.label)) 是简写用法,完整为:

let func = function (item) {
        if (reg.test(item.label)) { //检测通过
          return item
        }
      }
      this.data = this.tableData.filter(func)

filter函数迭代一个数组,然后根据传入的函数筛选合适的元素并且返回一个全新的数组

搜索空:

vue实现的前端模糊匹配搜索

搜索“瓜“:

vue实现的前端模糊匹配搜索

上一篇:使用element UI时,table表格插入input输入框后里面的内容无法编辑问题


下一篇:vue3跟新视图遇见神奇现象