element中表格排序空值问题

解决element自定义排序空值问题

---

一、先添加属性代码

先给html需要排序列中加上 :sortable=“true”

 <el-table-column prop="last_time" align="center" min-width="10%" label="最后跟进时间" :sortable="true" show-overflow-tooltip>

1，为el-tabel添加属性 :default-sort 为表格列添加默认的排序列和排列顺序

:default-sort="sortRule"

2，创建 :default-sort 默认绑定的 默认的排序列和排列顺序数据
再创建一个空 :tabData

return{
		sortRule:{ prop:null,order:null},//默认的排序列和排序书序
	 	tabData:'',//新默认tabel表格数据 用于不排序的时候赋值给默认表格tabel数据
}

二、编写排序部分代码

1， 给el-tabelde绑定点击排序出发事件@sort-change=“sortChange”

@sort-change="sortChange"

2, 点击列中排序按钮时候出发排序代码 在methods中编写

   methods: {
   // 点击按钮时触发
     sortChange(column) {
           let _this = this
           if (column.order !== null &&  column.prop === 'last_time') {       //last_time替换成你自己的列prop数据name
             const data = []
             for (let i = 0; i < _this.underclientlistData.length; i++) {     //underclientlistData替换成你自己的el-tabel绑定的表格数据
               //判断如果是空的push在数字后面，有值的就放在前面，然后把排好的数组再赋值给表格data
               if (_this.underclientlistData[i].last_time === null) {
                 data.push(_this.underclientlistData[i])
               } else {
                 data.unshift(_this.underclientlistData[i])
               }
             }
             _this.underclientlistData = data  //最后把排序好的表格数据赋值给排序前的表格数据 
           }
           //如果不排序了，就恢复到最初未排序的状态
           if (column.order === null) {
           //tabData是上面第一标题第2是创建的用来存放数据的  tabData在获取表格数据的时候存下表格数据意思等同于underclientlistData 
             _this.underclientlistData = _this.tabData 
           }
           //把当前排序的规则记录下来，给翻页时提供了默认排序条件
           _this.sortRule.prop = column.prop
           _this.sortRule.order = column.order
         },
}

3， 在获取表格数据的时候也给tabData存一下 用来备用不排序的时候赋值给之前的本来的表格数据

最终效果
实现前

实现后