Element el-table表格排序 过滤空数据

Element el-table表格排序 过滤空数据

今天做项目的时候,遇到了一个需求,排序表格内容的时候,只排序当前列有数据的数据,如果当前列没有数据,则将此行数据一直放置最后

Element 中 如果采用默认排序, 默认会将此列无数据的行放置在有数据的之前,如下图

自己手动排序的结果

• 排序前
  

1.首先在需要调用的表头上添加 sortable=“custom” 为定义过滤
2.在el-table上监听需要自定义过滤的方法 并且传入默认排序 sortRule每次点击的时候会调用此方法

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

3. 此处需要提前拷贝一份一模一样的表格数据 用来取消排序的时候还原默认排序

 // 根据所选的指标集合  需要把子集集合的字段记上
                this.tableData = success ? data.data : [];
                this.sortData = success ? data.data : [];

4.执行排序变化的方法 直接上代码

   if (column.order !== null && column.prop === 'last_time') {
                    //last_time替换成你自己的列prop数据name
                    const data = [];
                    for (let i = 0; i < _this.tableData.length; i++) {
                        //tableData替换成你自己的el-tabel绑定的表格数据
                        //判断如果是空的push在数字后面，有值的就放在前面，然后把排好的数组再赋值给表格data
                        if (_this.tableData[i][last_time] === null) {
                            data.push(_this.tableData[i]);
                        } else {
                            data.unshift(_this.tableData[i]);
                        }
                    }
                    // 自定义排序方法  过滤掉 null undefined '' 等空值
                    data.sort((a, b) => {
                        if (a['last_time'] === b['last_time']) {
                            return 0;
                        } else if (a['last_time'] == null || a['last_time'] === "") {
                            return 1;
                        } else if (b['last_time'] == null || b['last_time'] === "") {
                            return -1;
                        } else if (column.order === "ascending") {
                            // 升序
                            return a['last_time'] < b['last_time'] ? -1 : 1;
                        } else {
                            // 降序
                            return a['last_time'] < b['last_time'] ? 1 : -1;
                        }
                    });
                    
                    
                    _this.tableData = data; //最后把排序好的表格数据赋值给排序前的表格数据
                }
             //如果不排序了，就恢复到最初未排序的状态
            if (column.order === null) {
            // 用之前拷贝的数据还原默认排序
                _this.tableData = _this.sortData;
            }
            _this.sortRule.prop = column.prop;
            _this.sortRule.order = column.order;

• 排序后 成功将空值 放置最后
  
  有其他好的方法还请大佬指点