element-ui表格列排序错乱问题解决方案

文章目录

一、基本代码
二、问题
三、解决方案

一、基本代码

在使用el-talble的时候可以加上sortable属性，使表格中的某一列具备排序的功能，点击表格title右侧的三角符号可以切换正序和倒序排列。如下图及代码所示：

<el-table-column prop="qushi" label="趋势"sortablealign="center"/>

二、问题

上图中我并没有截取完整的表格，只截取了排序列的部分。仔细观察就会发现，当列倒序排序的时候，9.98排在了89.91的前面，89.91又排在了89.89前面，这是个明显的bug，需要我们处理。
之所以出现这样的问题，是因为element-ui的排序默认是按照字母顺序排序的，首字母9和首字母8相比，倒序排序首先是9。首字母优先排序，不会考虑到后面小数点的问题。如果我们希望按照数字的大小排序，需要我们自定义。

三、解决方案

解决的方法就是我们自定义一个函数实现数字排序。

<el-table-column prop="qushi" label="趋势"sortable:sort-method="(a, b) => { return a.qushi - b.qushi; }"align="center"/>

如上代码所示(a, b) => { return a.qushi - b.qushi; } 这个就是我们自定义的lambda表达式函数，a-b>0表示a大于b；a-b=0表示a等于b，a-b<0表示a小于b。其中qushi是我的这个表格字段的属性名称prop。

经过上述的修改之后，表格列排序就可以按照字段的数字大小顺序排序了。

element-ui表格列排序错乱问题解决方案相关推荐

Vue+Element UI表格列的显示和隐藏
如下代码: <template><div><el-table:data="tabledate"height="400">// ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
element ui表格中的algin属性无效
我们在使用element ui表格中,经常需要调整表格内容的文字对齐位置,例如: 文档中描述是使用algin="left / right / center"调整文字对齐,但是我们使 ...
element UI 表格做下滑滚动效果，请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
element ui 表格，通过下载按钮下载生成Excel表格
element ui 表格,通过下载按钮下载生成Excel表格,内容记录 // 安装插件 xlsx 和 file-saver import XLSX from "xlsx"; im ...