Element中table排序＜针对表格中的数据有空的部分进行处理＞

前言：当用到Element的el-table自带的排序<sortable>属性时，如果表格中的数据某一项为空，就会出现排序错乱；

---

解决思路：将为空的数据所在行置前、置后展示

el-table设置项如下：

<template>
    <!--
        default-sort="sortRule" 对应的为默认的排序规则<内容置于data(){}中>
        @sort-change="handleSortChange" 自定义排序方法进行过滤<方法置于methods中>
        el-table-column中的需要设置sortable<必须指定> 开启排序功能
     -->
    <el-table :data="underclientlistData" :default-sort="sortRule" @sort-change="handleSortChange">
        <el-table-column prop='xxxx' label='xxxx' sortable></el-table-column>
    </el-table>
</template>

<script>
    export default {
        data(){
            return {
                //对应el-table中设置的属性default-sort
                sortRule:{prop:null,order:null},
                underclientlistData:[],//表格数据
            }
        },
        methods:{
            /**
             * 对应表格排序重置方法<el-table中设置的@sort-change=>
             * @param {Object} column 当前列的数据内容
             */
            handleSortChange(column){
               let _this = this
                if (column.order !== null &&  column.prop) {
              const data = [],k = column.prop;
              for (let i = 0; i < _this.underclientlistData.length; i++) { 
                if (_this.underclientlistData[i][k] === null) {
                  data.push(_this.underclientlistData[i])
                } else {
                  data.unshift(_this.underclientlistData[i])
                }
              }
              _this.underclientlistData = data 
            }
            if (column.order === null) {
              _this.underclientlistData = _this.tableData 
            }
            _this.sortRule.prop = column.prop
            _this.sortRule.order = column.order
            }
        }
    }
</script>