当前位置: 首页 > Web前端 > vue.js

GridManager表格组件实现过滤功能

时间:2023-03-31 21:00:50 vue.js

效果展示在表格头部添加过滤项是很多产品经理特别喜欢的一个交互,据说可以提高打野怪的效率。如何配置过滤功能在GridManager中归类为列配置项,所以该功能需要操作配置项columnData中的过滤器。columnData的使用需要在使用filter之前对GridManager的核心配置项columnData有一定的了解。columnData用于定义表列配置参数,是数组类型。每个数组元素对应一个表列,表列通过该参数配置。基本用法示例,点击在线调试:document.querySelector('#table-demo-baseCode').GM({gridManagerName:'demo-baseCode',ajaxData:'https://www.lovejavascript.com/learnLinkManager/getLearnLinkList',ajaxType:'POST',columnData:[{key:'name',text:'name'},{key:'info',text:'description'},{key:'url',text:'网址'}]});filter的使用了解了columnData的基本用法后,只需添加一个filter就可以实现过滤功能。配置项filter为Object类型,对象详细说明如下:option:过滤条件列表,数组类型。格式:[{value:'1',text:'HTML/CSS'}],使用filter时该参数必填。selected:过滤选中项,字符串类型,如果没有选中项则设置为''。此处设置的选定过滤条件将覆盖查询。isMultiple:否为多选,Boolean类型,默认为false,非必须。基础配置示例,点击在线调试:{filter:{//过滤列表,数组对象。格式:[{value:'1',text:'HTML/CSS'}],使用filter时该参数必填。选项:[{value:'1',text:'HTML/CSS'},{value:'2',text:'nodeJS'},{value:'3',text:'javaScript'},{value:'4',text:'前端鸡汤'},{value:'5',text:'下午咖啡'},{value:'6',text:'前端框架'},{value:'7',text:'前端相关'}],//过滤选中项,字符串,没有选中项时设置为''。这里设置的selected过滤条件会覆盖queryselected:'3',//No为多选,boolean值,默认为false。可选isMultiple:false},template:function(type,row){returnTYPE_MAP[type];}}github地址