element ui表格如何实现下拉筛选功能

这篇文章主要讲解了"element ui表格如何实现下拉筛选功能"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"element ui表格如何实现下拉筛选功能"吧！

1、default-sort中prop传入要排序的字段(接口返回或自己定义的数据)、order代表排序，这里用到降序
2、filters对象中text代表页面中显示的筛选文字,value代表筛选用到的值,在方法中filterHandler用到
3、column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件(绑定的是要对接口中排序的字段)
4、数据过滤的选项是否多选（multiple代表是否查询多条）
5、fliter-methods:数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。参数为value, row, column

methods: {// 表头过滤事件    filterHandler(value, row, column) {      const property = column["property"];      return row[property] === value;    }     }

数据类型

页面效果

感谢各位的阅读，以上就是"element ui表格如何实现下拉筛选功能"的内容了，经过本文的学习后，相信大家对element ui表格如何实现下拉筛选功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！