elementui table筛选-Element-ui 中的 elementui 表 copy_table 过滤

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

element-ui中的table组件有过滤功能：

图片.png

实现的方法就是将filters属性绑定到el-table-column这个字段上，然后监听触发过滤的filter-method。 该技术将传入三个参数：值、行和列。 详情请参阅下面的代码。 :

属性=“标签”

对齐='居中'

列键=“标签”

:filter-method="filterTag"

:filters="[{text:'男',value:'男'},{text:'女',value:'女'},{text:'未知',value:'未知'}]">

//filters的每个链表项都有两个属性：text和value。

//以下是filterTag方法

filterTag(value,row){//通常只用两个参数，分别是过滤器过滤后的值和每一行rows。

retrunrow.tag===value//将具体数组与过滤后的值进行比较elementui table筛选elementui table筛选，然后返回

这样就完成了表筛选，不过鸭子超人是绝对不会谈论那件小事的。

虽然这些表过滤器更适合本地开发，但是因为如果是真正的开发的话，表基本上都是和分页器在一起的，也就是说真正项目的表数据获取只会获取到某个页面的数据，然后单击下一页再次获取。 另一页数据。 因此，点击过滤后，只会过滤当前的数据。 如果页面改变，效果就会丢失。

在实际开发过程中，这个过滤函数通常在调用socket时传入参数，然后前端查询并返回数据。 因此，就在窃听过滤方法的争论中，可以获得过滤后的值。 那么，在窃听过滤器方法争议期间调用socket会成功吗？

过滤器标签（值，行）{

//调用socket的语句

retrunrow.tag===值

看一下官方文档：

filter-method：用于数据过滤的方法。 如果是多选过滤项，每一条数据都会执行多次，任何返回true的都会显示出来。

这是什么意思？ 如有疑问，请查看console.log！

过滤器标签（值，行）{

console.log(value)//随意复制一些东西

retrunrow.tag===值

图片.png

每次筛选都会复制出很多数据，表格中的数据会被复制多少次。 我也看到了这个，才明白filter-method是遍历每一行数据并进行过滤，即该方法上面的操作会执行很多次，如果调用socket的话，会一次性发起很多请求。 如果数据量很大的话，很容易崩溃。

鸭超人继续翻官方文档，发现了如下方法：

filter-change：当表的过滤条件发生变化时，会触发该事件。 参数的值是一个对象，对象的key是列的columnKey，对应的value是用户选择的过滤条件的字段

显然，这个风暴是在过滤条件发生变化时触发的，也就是说每次过滤只会执行一次，这就满足了我们的需求。 这场风暴的形式如下：

//在方法中

过滤器更改（过滤器对象）{

安慰。 日志（过滤器对象）

根据官方文档，参数是一个对象，对象的key就是列的columnKey。 我们还在el-table-column中设置了column-key="tag"，当过滤条件改变时，比如我选择了“男”和“女”。 触发这场风暴的参数是什么？ 我犹豫不决。 控制台日志：

图片.png

可以看到，正如官方文档所说，对象的键值是设置的columnKey，对象的值是由选定的过滤条件组的值组成的字段，即：filters=” [{text:'男',value:'男'},{text:'女',value:'女'},{text:'未知',value:'未知'}]"所选值。

这样就可以进行调整插座的操作了。