el-table筛选方法使用

被昵称折磨的小白

已于 2023-09-18 17:24:07 修改

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 vue elementui

于 2023-07-20 15:14:19 首次发布

本文链接：https://blog.csdn.net/m0_59293086/article/details/131579772

文章介绍了在Vue.js环境中，使用el-table组件进行数据筛选的三种方式：全局筛选、多字段筛选和单字段筛选。全局筛选通过对所有字段进行模糊匹配实现，多字段筛选则针对特定列进行，而单字段搜索则专注于一个特定字段。代码示例展示了如何根据用户输入在表格数据中进行过滤操作。

el-table筛选

三种筛选情况，全局筛选，多字段筛选，但字段筛选

全局筛选

 return this.tableData.filter(row => {
           return Object.values(row).some(value =>
               String(value).toLowerCase().includes(this.input.toLowerCase())
          // );
        });

字段说明：this.tableData :表格数据源，input：搜索框输入文本；

多字段搜索

return this.tableData.filter(row => {
     //2:指定项目模糊搜索 指定对数组内两个项目等key的列进行搜索
          let name= ["zl_no", "date"]//可以指定这一列
          return name.some(key=>{
               return String(data[key]).toLowerCase().indexOf(search) > -1
          // })
          // );
        });

字段说明：name:指定字段名称;可以根据name数组中指导的条件搜索

单字段搜索

return this.tableData.filter(row => {
            return String(row["name"]).toLowerCase().indexOf(this.input) > -1
        });

字段说明：name:指定搜索字段名称;可以根据name列表字段条件搜索

总结

单字段不需要使用some方法，多字段需要使用some方法