elementui实现表格自定义排序的示例代码
更新时间：2023年07月06日 09:44:56 作者：吃葡萄不吐葡萄皮嘻嘻
本文主要介绍了elementui实现表格自定义排序的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需求说明：
1、第一行不参与排序
2、实现带%排序
3、实现null值排序
4、实现值相等不排序
5、实现含有占位符‘–‘排序放到最后
效果图如下：
<template>
<div>
<template>
<el-table border :data="previewTableData" style="width:80%;margin:100px auto;" @sort-change="sortChange">
<el-table-column :sortable="item.val=='showcityname'?false:'custom'" v-for="(item,index) in tableTitle" :prop="item.val" :label="item.name">
</el-table-column>
</el-table>
</template>
</div>
</template>
<script>
export default {
data() {
return {
tableTitle: [{
name: "地区",
val: "showcityname",
},
{
name: "全为空",
val: "date",
},
{
name: "数量",
val: "num",
},
{
name: "包含--",
val: "address",
},
{
name: "包含null",
val: "tag",
},
{
name: "包含%",
val: "bai",
},
],
previewTableData: [{
date: null,
num: 90,
address: "--",
tag: 2,
bai: "100%",
all: 1,
showcityname: "重庆"
},
{
date: null,
num: 22,
address: 1,
tag: null,
bai: "5%",
all: 1,
showcityname: "南岸"
},
{
date: null,
num: 3,
address: 3,
tag: 30,
bai: null,
all: 1,
showcityname: "江北"
},
{
date: null,
num: 45,
address: 2,
tag: 11,
bai: "-2.4%",
all: 1,
showcityname: "渝北"
},
{
date: null,
num: 5,
address: "--",
tag: 49,
bai: "-8%",
all: 1,
showcityname: "九龙坡"
},
{
date: null,
num: 6,
address: "--",
tag: null,
bai: null,
all: 1,
showcityname: "巴南"
},
],
// 复制一份数据
previewTableDataClone: [{
date: null,
num: 90,
address: "--",
tag: 2,
bai: "100%",
all: 1,
showcityname: "重庆"
},
{
date: null,
num: 22,
address: 1,
tag: null,
bai: "5%",
all: 1,
showcityname: "南岸"
},
{
date: null,
num: 3,
address: 3,
tag: 30,
bai: null,
all: 1,
showcityname: "江北"
},
{
date: null,
num: 45,
address: 2,
tag: 11,
bai: "-2.4%",
all: 1,
showcityname: "渝北"
},
{
date: null,
num: 5,
address: "--",
tag: 49,
bai: "-8%",
all: 1,
showcityname: "九龙坡"
},
{
date: null,
num: 6,
address: "--",
tag: null,
bai: null,
all: 1,
showcityname: "巴南"
},
],
};
},
created() {},
methods: {
sortChange({
column,
prop,
order
}) {
let arr = [];
let obj = {};
console.log(column);
console.log(prop);
console.log(order);
let nullArr = [];
let otherArr = [];
//判断是否都为null,true不执行排序，反之排序
let flag = this.previewTableData.every((item) => !item[prop]);
let equalVal = this.previewTableData.map((item) => item[prop]);
let equalValFlag = false;
//判断是否每个值都相等
if (equalVal.length) {
//和第一个值进行比较
equalValFlag = equalVal.every((item) => item == equalVal[0]);
}
console.log(equalValFlag, "equalValFlag", flag, "flag");
if (!flag && !equalValFlag) {
console.log("我执行了");
this.previewTableData.forEach((item, index) => {
if (item.showcityname == "重庆") {
console.log(item.showcityname);
obj = item;
}
});
if (!this.previewTableData.length) return;
if (order == "ascending") {
this.previewTableData.forEach((item) => {
if (item[prop] && item[prop] !== "--") {
otherArr.push(item);
} else {
nullArr.push(item);
}
});
// this.previewTableData = [...otherArr,...nullArr]
this.previewTableData = otherArr.sort((a, b) => {
if ((a[prop] + "").includes("%") || (b[prop] + "").includes("%")) {
return a[prop].replace("%", "") - b[prop].replace("%", "");
} else {
return a[prop] - b[prop];
}
}).concat(nullArr);
this.previewTableData.forEach((item, index) => {
if (item.showcityname == "重庆") {
this.previewTableData.splice(index, 1);
}
});
if (!Object.keys(obj).length) return;
this.previewTableData.unshift(obj);
} else if (order == "descending") {
this.previewTableData.forEach((item) => {
if (item[prop] && item[prop] !== "--") {
otherArr.push(item);
} else {
nullArr.push(item);
}
});
// this.previewTableData = [...otherArr,...nullArr]
this.previewTableData = otherArr
.sort((a, b) => {
if (
(a[prop] + "").includes("%") ||
(b[prop] + "").includes("%")
) {
return b[prop].replace("%", "") - a[prop].replace("%", "");
} else {
return b[prop] - a[prop];
}
})
.concat(nullArr);
this.previewTableData.forEach((item, index) => {
if (item.showcityname == "重庆") {
this.previewTableData.splice(index, 1);
}
});
if (!Object.keys(obj).length) return;
this.previewTableData.unshift(obj);
} else {
// this.previewTableDataClone是在接口得到表格数据的时候拷贝了一份，用来还原取消排序时的表格数据
this.previewTableData = this.previewTableDataClone
}
}
},
},
};
</script>
<style lang="less" scoped>
/deep/.elx-header--column.col--ellipsis>.elx-cell .elx-cell--title {
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-wrap;
}
</style>到此这篇关于elementui实现表格自定义排序的示例代码的文章就介绍到这了,更多相关element表格自定义排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue学习笔记之指令v-text && v-html && v-bind详解
这篇文章主要介绍了vue学习笔记之指令v-text && v-html && v-bind详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
详解vuejs中执行npm run dev出现页面cannot GET/问题
这篇文章主要介绍了详解vuejs中执行npm run dev出现页面cannot GET/问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue实现标签云效果的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了修改Vue项目运行的IP和端口的方法，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-02-02
今天小编就为大家分享一篇vue 解决异步数据更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了如何删除vue项目下的node_modules文件夹，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了.html页面引入vue并使用公共组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了vue-mugen-scroll组件实现pc端滚动刷新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
本篇文章主要介绍了vue中用H5实现文件上传的方法实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了Vue3中使用Pinia修改State的五种方式,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
最新评论