<el-table :data="tableData" style="width: 100%" stripe @sort-change="sortChange">
<!-- 这是添加排序 -->
<el-table-column prop="date" label="时间" sortable="custom"></el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[ 10, 20, 40]" :page-size="size" :total="total" ></el-pagination>
sortChange({ prop, order }) {
this.dataAll.sort(this.compare(prop, order));
//获得分页后的数据
this.getpagedata();
},
/**
* 排序比较
* @param {string} propertyName 排序的属性名
* @param {string} sort ascending(升序)/descending(降序)
* @return {function}
*/
compare(propertyName, sort) {
function isNumberV(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)) {
return true;
} else {
return false;
}
}
return function (obj1, obj2) {
var value1 = obj1[propertyName];
var value2 = obj2[propertyName];
if (!isNumberV(value1) && !isNumberV(value2)) {
const res = value1.localeCompare(value2, "zh");
return sort === "ascending" ? res : -res;
} else {
if (sort === "ascending") {
return value1 - value2;
} else {
return value2 - value1;
}
}
};
},
element el-table 添加分页后全部排序
最新推荐文章于 2024-04-22 19:09:10 发布