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

时间：2024-03-18 08:55:03
  • 遇到为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"></el-table-column>
          <!-- 表头控制新代码 -->
          <el-table-column 
　　　　　　　　align="center" 
　　　　　　　　v-for="tableitem in formThead" 
　　　　　　　　:prop="tableitem.key" 
　　　　　　　　sortable resizable  //sortable可排序属性  resizeable可拖拽改变列宽，resizeable前提table标签border属性为true
　　　　　　　　:key="tableitem.key" :width="tableitem.width" :label="tableitem.label" show-overflow-tooltip min-width="100%">
              <template slot-scope="scope">                                                         
                  <el-tag
                    v-if="tableitem.key == \'invoiceType\'"
                    type="primary"
                    disable-transitions>{{scope.row.invoiceType}}</el-tag>
                    <span v-else>{{ scope.row[tableitem.key] }}</span>
              </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="采集信息" header-align="center" v-if="formTheadTwo.length > 0">
          <!-- 表头控制新代码 -->
          <el-table-column align="center" v-for="tableitem in formTheadTwo" :prop="tableitem.key" :class="tableitem.key" sortable resizable :key="tableitem.key" :width="tableitem.width" :label="tableitem.label" show-overflow-tooltip min-width="100%">
              <template slot-scope="scope">
                  {{ scope.row[tableitem.key] }}
              </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="发票状态" header-align="center" :data="formTheadThree">
          <!-- 表头控制新代码 -->
          <el-table-column align="center" v-for="tableitem in formTheadThree" :prop="tableitem.key" sortable resizable :key="tableitem.key" :width="tableitem.width" :label="tableitem.label" show-overflow-tooltip min-width="100%">
              <template slot-scope="scope">
                  {{ scope.row[tableitem.key]}}
              </template>
          </el-table-column>
          <el-table-column label="扫描流水号" align="center" prop="scanNo" min-width="150%" sort-by="scanNo" sortable resizable show-overflow-tooltip>
            <template slot-scope="scope">{{scope.row.scanNo}}</template>
          </el-table-column>
        </el-table-column>
        
        <el-table-column fixed="right" label="操作" align="center" min-width="150%">
          <template slot-scope="scope">
            <el-button type="text" @click="openItemDetail(scope)" size="mini">查看</el-button>
            <el-button type="text" size="mini" @click="handleEdit(\'编辑\',scope)" v-if="scope.row.checkStatus === \'未查验\'" style="color:green;">编辑</el-button>
            <el-button type="text" @click="deleteItem(scope)" size="mini" v-if="scope.row.canDel == \'1\' && scope.row.checkStatus === \'未查验\'" style="color:red;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

 

data对象：

　　

data() {
    return {
      sortRule:{prop:null,order:null}
    }
}

JS：思路是对后台请求过来的数据进行重组，将返回值为null的，和有返回值的存在不同数组，然后合并成一个数组，从而将总数据中的null值和有值的数据两极化，分别排在数组前后。配合elementui中table表格自身的排序功能即可产生效果.

　　

//排序触发函数
    sortChange(column){
      // console.log(column,"sortchange")
　　　　//点击向上【向下】激发排序　　
      if(column.order !== null && column.prop !== null){   //项目中要求所有列可排序，所以条件进行了判断！==null 即所有列 【如果项目中只有单个列【特定列】存在排序要求，出现混乱，colum.prop == "列的key"即可。】
        var index = column.prop;
        var data = [];
        var samllData = [];
        for(let i = 0; i < this.tableData.length; i++){  //this.tableDate 为表格总数据，后台请求的数据
          if(this.tableData[i][index] === null){
            data.push(this.tableData[i]);
          }else if(this.tableData[i][index] <= 0){  //项目中存在金钱数据，返回0.00余数为2的此种数据，所以无法用等于判断，此处进行了大小比较，来抓取0.00这个数据。
            samllData.push(this.tableData[i])
          }else{
            data.unshift(this.tableData[i]);
          }
        }
        this.tableData = data.concat(samllData);【如此拼接顺序，保证null在前，紧接0，依次增大。】
      }
　　//再点击向上【向下】恢复原始排序
      if(column.order === null){
        this.tableData = this.tableData;
      }
      this.sortRule.order = column.order;
      this.sortRule.prop = column.prop;
    },

 

在请求数据处进行判断检查，含分页功能的页面，分页后继续保存排序规则：

 
//将次if语句放置在赋值请求接口，拿取后台数据，给this.table数组赋值语句之后即可完成分页功能的，翻页后仍旧有排序规则【配合el-table标签中的 default-sort 属性
】。
//是否存在排序规则，存在则保留
        if(this.sortRule.order!==null && this.sortRule.prop!==null) {
          this.sortChange(this.sortRule);
        }

 

　　最终效果：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　翻页之后仍旧保留排序规则：

 

抓取0.00格式数据正确进行排列：