elementui表格数据,element ui下拉菜单

　　本文主要详细介绍元素ui表的下拉过滤功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享元素ui表实现下拉过滤的具体代码，供大家参考。具体内容如下

　　1.在default-sort中，prop传入要排序的字段(接口返回的数据或者自己定义的数据)，order代表排序，这里用降序。

　　2.filters对象中的text表示页面上显示的筛选文本，value表示用于筛选的值，该值由方法中的filterHandler使用。

　　3.列的键。如果需要使用filter-change事件，就需要这个属性来标识哪一列的过滤条件(界面中要排序的字段是绑定的)。

　　4.数据过滤是否选择多个选项(多表示是否查询多个项目)

　　5.过滤方法：用于数据过滤的方法。如果是多选过滤项，会对每条数据执行多次，任何时候返回true都会显示出来。参数是值、行、列。

　　模板

　　el表

　　:data=tableData

　　style=宽度：100%

　　Empty-text=尚无数据

　　ref=filterTable

　　El-表格-列

　　prop=deviceType

　　Label=“设备类型”

　　显示溢出工具提示

　　column-key=deviceType

　　:过滤器=[

　　{text:气象设备，值：1}，

　　{text:土壤湿度设备，值：0}，

　　]

　　:filter-method=filterHandler

　　:filter-multiple=true

　　模板槽-范围=“范围”

　　span-if= scope . row . device type==1 气象监测设备/span

　　span-if= scope . row . device type==0 土壤湿度监测设备/span

　　span/span

　　/模板

　　/El-表格-列

　　/el-table

　　/模板

　　方法：{

　　//头过滤事件

　　filterHandler(值，行，列){

　　const property=column[ property ]；

　　返回行[属性]===值；

　　}

　　}

　　数据类型

　　页面效果

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。