vuejs通过input实现表格/列表模糊搜索代码分析

功能需要：页面列表内容太多，不想用接口搜索实时调用，想通过一个input模糊搜索快速查询信息。

1、template

<el-input v-model="search" placeholder="请输入" @input="searchKey"></el-input>
<div>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{item.name}}</li>
  </ul>
</div>

2、script代码

export default {
  data() {
    return {
		search:'',
		list:[], //模拟搜索数据
		initdata:[] //接口原始数据
	}
  },
  
  methods: {
	//模糊搜索
    searchKey() {
      this.list = [];
      if (this.search !== "") {
        this.initdata.map(item => {
		  //通过indexOf筛选赋值
          if (item.HospitalName.indexOf(this.search) != -1) {
            this.list.push(item);
          }
        });
      } else {
	    //清空input，拿到原来接口数据
        this.list = this.initdata;
      }
    },
  }
  //input：在input值改变时触发
}

以上是编程学习网小编为您介绍的“vuejs通过input实现表格/列表模糊搜索代码分析”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。