el-table表格——sortable排序 & 出现小数、%时排序错乱

el-table表格——sortable排序 & 出现小数、%时排序错乱

前端实现排序

只需要在表头上加上一个sortable属性即可

<el-table-column
   prop="bookCount"
   label="图书总量"
   align="center"
   :show-overflow-tooltip="true"
   sortable
></el-table-column>
1
2
3
4
5
6
7

问题1、当数据中出现小数，导致排序错乱

解决：

<el-table-column
   prop="intoRate"
   label="进场及时率"
   align="center"
   :sort-method="(a,b)=>{return a.intoRate - b.intoRate}"
   :show-overflow-tooltip="true"
   sortable
></el-table-column>
1
2
3
4
5
6
7
8

问题2、当数据需要使用%来显示，直接返回的数据含有%导致排序错乱，需要返回正常数字，在这里进行拼接%

解决

<el-table-column
    prop="intoRate"
    label="进场及时率"
    align="center"
    :sort-method="(a,b)=>{return a.intoRate - b.intoRate}"
    :show-overflow-tooltip="true"
    sortable>
       <template slot-scope="scope">
          {{ scope.row.intoRate }}%
       </template>
</el-table-column>
1
2
3
4
5
6
7
8
9
10
11