element ui - el-table数据排序

el-table 添加分页后对全部数据排序

场景

后台一次性返回全部数据，需要前端对所有数据进行分页和排序。

思路

使用element-ui的 自定义排序 规则，将 sortable 设置为 custom ，同时在 Table 上监听 sort-change 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而对所有数据进行排序再对表格数据进行分页计算。

代码

<el-table
        :data="currentPageData":header-cell-style="{background:'#eef1f6',height: '48px'}"
        @sort-change="sortChange"
        border
        style="width: 100%;">/* 需要排序的列 */<el-table-column
          prop="report_type"
          label="取值"
          sortable="custom"
          width="200"></el-table-column>/* 需要排序的列 */<el-table-column
          prop="report_type_desc"
          label="中文映射"
          sortable="custom"
          width="200"></el-table-column><el-table-column
          prop="remark"
          label="备注"></el-table-column><el-table-column
          label="操作"
          width="250"><template slot-scope="scope"><el-button type="primary" size="mini" @click="edit(scope.row)">修改</el-button><el-button type="success" size="mini" @click="copy(scope.row,scope.$index)">复制</el-button><el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button></template></el-table-column></el-table>

// 排序sortChange({ prop, order }){this.allData.sort(this.compare(prop, order));},/**
     * 排序比较
     * @param {string} propertyName 排序的属性名
     * @param {string} sort ascending(升序)/descending(降序)
     * @return {function}
     */compare(propertyName, sort){// 判断是否为数字functionisNumberV(val){var regPos =/^\d+(\.\d+)?$/;//非负浮点数var regNeg =/^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;//负浮点数if(regPos.test(val)|| regNeg.test(val)){returntrue;}else{returnfalse;}}returnfunction(obj1, obj2){let value1 = obj1[propertyName];let value2 = obj2[propertyName];// 数字类型的比较if(isNumberV(value1)||isNumberV(value2)){if(sort ==="ascending"){return value1 - value2;}else{return value2 - value1;}}// 布尔值的比较：利用减法-转化true 和 false// true => 1   false ⇒ 0// true-false => 1  false-true => -1// 下面方法是按照先false后true的顺序排序，如果想先true后false，调整value1-value2 和  value2 - value1的顺序即可elseif(_.isBoolean(value1)&& _.isBoolean(value2)){if(sort ==="ascending"){return value1 - value2;}else{return value2 - value1;}}// 字符比较使用localeCompare()else{const res = value1.localeCompare(value2,"zh");return sort ==="ascending"? res :-res;}};}

总结

如上封装的 compare 方法适合用于任何数据的排序。