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值改变时触发
}

进入前端入门建站教程官网入口

html5如何input禁止文本输入（控制输入）

js如何限制input输出（只允许整数和小数点）

input设置只允许输入汉字

vuejs实现el-input复制粘贴功能

利用input做一个颜色选择器即时渲染

标签： el-input, input, 模糊搜索

上面是“vuejs通过input实现表格/列表模糊搜索代码分析”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2180.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！