Element-UI Table表格，遇到为null的返回数据及为0的数据造成自带排序功能错乱的解决...

最新推荐文章于 2023-11-20 15:26:54 发布

weixin_30580943

最新推荐文章于 2023-11-20 15:26:54 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/lishengye/p/11245073.html

当Table组件接收到包含null数据时，内置排序功能出现混乱。解决方法是通过JavaScript预先处理数据，将null值与非null值分别存储在不同数组中，再合并为一个数组，使null值始终位于或始终不位于排序后的特定位置，以此保持排序的准确性。在分页情况下，也能保持排序规则。同时，对于0.00格式的数据，也能正确排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到为null的返回数据造成自带排序功能错乱

正常排序：

　　　　　　　　遇到问题的大概效果：

　　　　　　　　　　　　　　　　　　排序后，返回数据为null的单元格，会穿插在正常排序中。造成排序混乱

HTML部分：主要看红色代码


//多级表头表格
<el-table 
      :data="tableData" 
      :cell-style="cellStyle" 
      @selection-change="handleSelectionChange" 
      height="calc(100% - 40px)" 
      :border="true" 
      style="width: 100%" 
      ref="multipleTable" 
      v-loading="tableLoading" 
      :row-key="getRowKeys" 
      @sort-change="sortChange"     //点击排序按钮触发
      :default-sort = sortRule>　　　//设置默认排序方式，为分页功能准备。分页保留排序规则
        <el-table-column :reserve-selection="true" type="selection" label width="55" align="center"></el-table-column>
        
        <el-table-column label="基本信息" header-align="center">
          <el-table-column type="index" :index="indexMethod" label="序号" align="center" width="60">