Element-UI Table表格，遇到為null的返回數據及為0的數據 造成自帶排序功能錯亂的解決

• 遇到為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格式數據正確進行排列：