element table 中sortable排序

您所在的位置:网站首页 字典排序规则怎么设置 element table 中sortable排序

element table 中sortable排序

2024-07-15 13:33| 来源: 网络整理| 查看: 265

在项目中做表格的排序,我使用的是自定义的排序,也就是通过后台接口进行的排序,写个文章记录一下element的三种排序方式。

在列中设置sortable属性即可实现以该列为基准的排序,接受一个Boolean,默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。在本例中,我们还使用了formatter属性,它用于格式化指定列的值,接受一个Function,会传入两个参数:row和column,可以根据自己的需求进行处理。

一、default-sort 你需要在那个列上加排序就在那一份列上加sortable ,加完后就会出现排序的按钮了,default-sort 可以设置默认的列和它默认的排列方式 , order 为 ascending 按钮选中的是向上的箭头,如果 order 为 descending 那选中的是向下的箭头。

在这里插入图片描述

二、sort-method 自定义方法我们需要在当前列加入sort-method,然后它的方法和sort排序是一样的,这样我们就可以自定义排序

methods: { fn2(a, b) { return a - b; } }

在这里插入图片描述 三、custom-sort 根据接口进行排序,我们也需要自定义排序,这个和第二种方法不一样,第二种只是进行排序,我们不能做其他的操作

// 主要是column中的值,你需要给你的后端传过去,我的paramsObj 就是传给后端的 handlesortChange(column) { if (column.order == "ascending") { this.paramsObj.asc = true; } if (column.order == "descending") { this.paramsObj.asc = false; } }

在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3