element table sortable排序的使用以及出现小数、%排序错乱

最新推荐文章于 2024-08-14 11:41:25 发布

暖一杯茶

最新推荐文章于 2024-08-14 11:41:25 发布

阅读量2.4k

点赞数 1

分类专栏： Vue 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44932450/article/details/121658127

版权

Vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在带有小数点的数据中实现正确的排序，以及在显示百分比时避免排序错误的方法。通过在`el-table-column`组件中添加`sortable`属性和自定义的`sort-method`，可以确保建设规模列按照数值正确排序。同时，对于价格列，通过在模板中处理数据并显示百分比，同时在`sort-method`中比较原始数值来保持排序的准确性。

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

想实现以下结果：
带小数点排序问题
在这里插入图片描述
只需在表头上加上一个sortable属性即可
注意1、当数据中出现小数，导致排序错乱
解决方法：需要在el-table-column中添加:sort-method="(a,b)=>{return a.construction_scale - b.construction_scale}"

<el-table-column
	prop="construction_scale"
    label="建设规模"
    width="120"
    :sortable="true"
    :sort-method="(a, b) => { return a.construction_scale - b.construction_scale; }"
>
</el-table-column>

注意2、当数据需要使用%来显示，直接返回的数据含有%导致排序错乱，需要返回正常数字，在这里进行拼接%
解决方法：拼接数字{{scope.row.price}}%

<el-table-column
    prop="price"
    label="价格"
    width="200"
    sortable
    :sort-method="(a,b)=>{return a.price - b.price}">
    <template slot-scope="scope">
      {{scope.row.price}}%
    </template>
</el-table-column>