elementui中el-table后台筛选功能详解
#app{width:100%;高度：100vh；框大小：边框框；填充：20px0020px;}问题描述对于后台管理系统来说，比较常见的功能就是增删改查。比较常见的是“查”过滤数据查看。饿了么ui自带过滤功能。但是官方文档给出的例子是“前端筛选”，意思是硬编码的数据被前端筛选出来进行展示。官方效果图如下：但是实际开发中的数据是后台同事动态从数据库中取数据返回给前端的，所以官方案例“前端筛选”的用法不是用了很多，但还是能看出来。这篇文章主要讲一下“后台筛选”的使用步骤。这里不禁要吐槽一下官方文档写的“不接地气”的后端筛选步骤。第一步：建表
初步效果图如下：步骤2：对要过滤的某列启用过滤功能。启用过滤其实很简单。只需要在对应的列中添加filters属性，即可启用该列的过滤。Filters是一个数组，数组中的每一项都有text和value两个属性，分别是呈现的数据和对应的logo。这里我们先以姓名为例，过滤其他表单域的多个条件，后面再添加。添加filters数组的写法一：直接写在label中（不推荐）如果filters数组直接写在label中，会写死，不是动态的，不推荐这种方法。因为在开发情况下，过滤条件filters数组的值也是从后台获取的数据。当然，如果类似于筛选性别，男或女；筛选幼儿园班、小班、中班、大班。也可以将这个固定的筛选数据写在标签中。不过大多数情况下是写在方法里，方便后台获取数据
添加过滤器数组写法二：数组写在方法methods中（推荐）//html部分//js部分getfilterNameItem(){letapiArr=[//从后端获取过滤后的字段{text:"WangXiaohu",value:"WangXiaohu"},{text:"ZhangXiaohua",value:"ZhangXiaohua"},{text:"Zhao小二",value:"赵小二"},{text:"钱大牛",value:"钱大牛"},];返回apiArr；//returnreturnsto}我们对某一列启用过滤功能后，在该列的表头会自动出现一个对应的下拉小箭头，点击显示对应的过滤项，勾选过滤或重置为清晰，如下图：Step3:Addfilter-chan这里的ge监控方法点击filter或者reset，但是没有反应，因为还不够，我们还需要加一个方法filter-change，这个方法官方介绍如下：filter-change这个方法可以监听过滤项的变化，当用户点击过滤或重置小按钮时会触发。让我们添加它看看有什么变化（将其添加到el-table标签中）：//html部分//js部分filterChange(filterObj){console.log(filterObj);}点击filter或者reset的时候打印，看看会有什么变化修改官方文档提供的column-key最终变成这样：第四步：在filter-change的回调函数中做相应的处理。单击以过滤并单击以重置。这样，你可以发送一个带有过滤参数的请求或者clearandreset...补充多条件过滤如果表要多条件过滤，其实很容易简单，比如你想再添加一个gender的filter，只需要在gender这一列添加一个column-key和filters即可（每列column-key的值不能相同），同时在filter的回调中进行判断-改变。个人感觉，如果要多条件过滤，这样写会很不优雅。如果是多条件过滤，建议把过滤项写在外面，不要写在表格里。相应步骤见我的另一篇博客：Vue仿teambition的过滤功能（使用饿了么UI）https://segmentfault.com/a/11...最后附上案例中的完整代码： 