概述
本文实例为大家分享了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" style="width: 100%" 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表格实现下拉筛选功能所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复