详解IView表格的内外部sort排序，filter筛选方法 |
您所在的位置：网站首页 › iview列表固定列问题 › 详解IView表格的内外部sort排序，filter筛选方法 |
|
详解IView表格的内外部sort排序，filter筛选方法
IView框架（https://www.iviewui.com/） 是一套基于 Vue.js 的高质量UI 组件库，整体的效果还是非常好看的。但是其中的表格组件虽然没有bootstrap-table的组件好用，但是也能够满足基本的需求。 这次我使用的是sortMethod，filterMethod方法。这两个方法在官方文档中只是几句话略过，没有特别详细的解释。在官方的github中看到过相关的提问，但是其回答让人看起来一头雾水。这里我自己琢磨了一下这两个方法的使用，对每个参数都有详细的解释。 内部排序sortMethod方法： Date Name Age Address 2016-10-01 Jim Green 24 London No. 1 Lake Park 2016-10-02 Joe Black 30 Sydney No. 1 Lake Park 2016-10-04 Jon Snow 26 Ottawa No. 2 Lake Park官方释义： 排序 # 通过给 columns 数据的项，设置 sortable: true，即可对该列数据进行排序。 排序默认使用升序和降序，也可以通过设置属性 sortMethod 指定一个自定义排序函数，接收三个参数 a 、 b 和 type。 通过给某一列设置 sortType 可以在初始化时使用排序。 如果使用远程排序，可以设置 sortable: 'custom'，然后在触发排序事件 @on-sort-change后，进行远程排序，并手动设置新的 data，详见 API。 注意，排序并不会影响到源数据 data。 根据官方的提示，我们可以知道sortMethod分别接受a,b,type三个参数 a:比较的第一值 b:比较的第二个值 type:非常重要的值，desc倒序 asc顺序 我们需要根据自己的需求设置筛选的条件，然后设置不同的排序方法返回的数值，即可完成自定义排序 下面的例子就是进行时间的筛选： { title: '创建时间', key: 'datetime', sortable: true, width: 150, sortMethod: function (a,b,type) { let at = new Date(a); let bt = new Date(b); if(type === 'desc'){ return at>bt?bt:at; } else return at>bt?at:bt; } }, 外部排序on-sort-change方法： 随着需求的提升，项目并不满足于仅仅是当前页面排序，更为需要的是进行全局的排序。点击排序按钮，可以调用自己写的排序方法，进行数据重新排列。 下面为on-sort-change方法在官方api中的释义： 事件名 说明 返回值 on-sort-change 排序时有效，当点击排序时触发 column：当前列数据key |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |