这篇文章主要讲解了“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
<template> <el-table :data="tableData" empty-text="暂无数据" ref="filterTable" > <el-table-column prop="deviceType" label="设备类型" show-overflow-tooltip column-key="deviceType" :filters="[ { text: '气象设备', value: 1 }, { text: '墒情设备', value: 0 }, ]" :filter-method="filterHandler" :filter-multiple="true" > <template slot-scope="scope"> <span v-if="scope.row.deviceType == 1">气象监测设备</span> <span v-if="scope.row.deviceType == 0">墒情监测设备</span> <span></span> </template> </el-table-column> </el-table> </template> methods: { // 表头过滤事件 filterHandler(value, row, column) { const property = column["property"]; return row[property] === value; } }
数据类型
页面效果
感谢各位的阅读,以上就是“element ui表格如何实现下拉筛选功能”的内容了,经过本文的学习后,相信大家对element ui表格如何实现下拉筛选功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。