前端--------表格的模糊查询(vue项目，用到了element-ui)

html代码

  
  查询

  
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
      
      

js代码

      export default {
          data() {
            return(){
              tableData: [], // 这里的tabledata是从后台获取到的数据
              pageNumber: 1,
              pageSize: 10,
              total: 0,
              search: "",
            }
          },
          watch: {
            search(newVal, oldVal) {
              if (newVal == "") {
                //这个方法是获取后台数据，自己根据自己的要求调用
                this.getresourceList();
              }
              if (oldVal != "") {
                this.query();
              }
            }
          }，
          methods: {
            query() {
              // 这里我是要根据类型，名字，所属实现模糊查询，需要什么就在filter里的if中加
              // 这里要用 toLowerCase()  把你输入的全部换成小写，可以更好的模糊查询
              let _search = this.search.toLowerCase();
              let newListDate = [];
              if (_search) {
                this.tableData.filter((item) => {
                  if (
                    item.type.toLowerCase().indexOf(_search) !== -1 ||
                    item.zhname.toLowerCase().indexOf(_search) !== -1 ||
                    item.container.toLowerCase().indexOf(_search) !== -1
                  ) {
                    newListDate.push(item);
                  }
                });
              }
              this.tableData = newListDate;
              this.total = newListDate.length;
            }
          }
}