我们的项目开发过程中，有时会遇到表格排序问题elementui表格设置排序，数据有多列。 我们需要根据每一列数据进行排序。 这个时候我们应该做什么呢？ 如何才能实现类似于Excel中的排序效果呢？
1、没有分页时对数据进行选择性排序
首先需要在相应的header标签中添加相应的属性。
这里我们以角色名称为例。 设置 :sortable="true" 后，可以在页面相应标签上看到额外的内容，如右图。
至于：sort-method="sortaaa"，用于定义相应的方法和数据比较。 该方法是在methods中定义的，如下图
这里，默认的排序是基于第一个字母AZ。 如果是数字，则从小到大排序elementui表格设置排序，或者从大到小排序。 请看右图效果：
项目开发时如果需要按照时间排序，可以直接将row.children.id替换为对应的时间属性。 如果接收到的时间属性是yyyy-MMMM-dddd hhhh-mmmm-ssss，可以使用formdata进行转换然后处理。
2. 对链表进行分页排序
在分页的情况下，如果后台返回的数据没有整理好，那么日期和时间就会不对应，我们就得不到我们想要的数据。 如果使用上面的方法，只会对当前页面的数据进行排序。
这里需要在表的el-tabel标签中添加@sort-change="自定义方法名"，并在对应需要排序的列中添加sortable='custom'属性（可以查看sortab属性自行斟酌，这里不再赘述。），如图：：
由于这里没有足够的数据进行分页处理，请在显示代码时自行感受。 if 条件按倒序排列，else if 条件按降序排列。
发表评论