element table 中sortable排序 |
您所在的位置:网站首页 › 字典排序规则怎么设置 › element table 中sortable排序 |
在项目中做表格的排序,我使用的是自定义的排序,也就是通过后台接口进行的排序,写个文章记录一下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 |