el-table使用sort-method进行排序

最新推荐文章于 2024-09-18 14:28:38 发布

haodayzsm

最新推荐文章于 2024-09-18 14:28:38 发布

阅读量5k

点赞数

分类专栏： element-ui 文章标签： elementui

本文链接：https://blog.csdn.net/qq_36571947/article/details/115756092

版权

element-ui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了在Vue.js中使用Element UI组件库的Table时，如何正确设置`sort-method`进行自定义排序。关键点在于将`sort-method`属性设置在`<el-table-column>`内，并确保添加`sortable`属性。同时，对于排序方法`sortByPrice`的实现，需要注意返回值应为数值而非布尔值，以确保正确比较。文章还提供了示例代码帮助理解这一过程。

摘要由CSDN通过智能技术生成

1、由于sort-method在Table-column Attributes中，所以应使用:sort-method而不是@sort-method，且必须添加sortable属性

<el-table-column sortable label="客单价(元)" :sort-method="sortByPrice" min-width="100" align="center">
　<template slot-scope="scope">
　　<span v-if="scope.row.collection_amount!==0">{{ (scope.row.collection_amount/scope.row.collection_num)/100 ' moneyFilter }}　 
　　</span>
　　<span v-else>0.00</span>
　</template>
</el-table-column>

**2、判断大小并返回

踩坑：返回值应为数值，而不是boolean

// 根据客单价排序
sortByPrice(row, row1) {
　if (row.collection_amount === 0) {
　　return -1
　}
　if ((row.collection_amount / row.collection_num) < (row1.collection_amount / row1.collection_num)) {
　　return -1
　} else {
　　return 1
　}
}