elementui實(shí)現(xiàn)表格自定義排序的示例代碼
更新時(shí)間：2023年07月06日 09:44:56 作者：吃葡萄不吐葡萄皮嘻嘻
本文主要介紹了elementui實(shí)現(xiàn)表格自定義排序的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
需求說(shuō)明：
1、第一行不參與排序
2、實(shí)現(xiàn)帶%排序
3、實(shí)現(xiàn)null值排序
4、實(shí)現(xiàn)值相等不排序
5、實(shí)現(xiàn)含有占位符‘–‘排序放到最后
效果圖如下：
<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: "地區(qū)",
val: "showcityname",
},
{
name: "全為空",
val: "date",
},
{
name: "數(shù)量",
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: "巴南"
},
],
// 復(fù)制一份數(shù)據(jù)
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不執(zhí)行排序，反之排序
let flag = this.previewTableData.every((item) => !item[prop]);
let equalVal = this.previewTableData.map((item) => item[prop]);
let equalValFlag = false;
//判斷是否每個(gè)值都相等
if (equalVal.length) {
//和第一個(gè)值進(jìn)行比較
equalValFlag = equalVal.every((item) => item == equalVal[0]);
}
console.log(equalValFlag, "equalValFlag", flag, "flag");
if (!flag && !equalValFlag) {
console.log("我執(zhí)行了");
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是在接口得到表格數(shù)據(jù)的時(shí)候拷貝了一份，用來(lái)還原取消排序時(shí)的表格數(shù)據(jù)
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>到此這篇關(guān)于elementui實(shí)現(xiàn)表格自定義排序的示例代碼的文章就介紹到這了,更多相關(guān)element表格自定義排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了Vue 2源碼解析Parse函數(shù)定義，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue3+TS 實(shí)現(xiàn)自定義指令長(zhǎng)按觸發(fā)綁定的函數(shù)
這篇文章主要介紹了vue3+TS實(shí)現(xiàn)自定義指令長(zhǎng)按觸發(fā)綁定的函數(shù),文中給大家分享了編寫(xiě)自定義指令時(shí)遇到的幾個(gè)難點(diǎn)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例
這篇文章主要介紹了使用vue3重構(gòu)拼圖游戲的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決
這篇文章主要介紹了在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法
這篇文章主要介紹了使用Vuex實(shí)現(xiàn)一個(gè)筆記應(yīng)用的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家介紹了非常全面vue的組件通訊方法總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue 實(shí)現(xiàn)可視化拖拽頁(yè)面編輯器
這篇文章主要介紹了Vue 實(shí)現(xiàn)可視化拖拽頁(yè)面編輯器的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
詳解Vue-cli中的靜態(tài)資源管理（src/assets和static/的區(qū)別）
這篇文章主要介紹了Vue-cli中的靜態(tài)資源管理（src/assets和static/的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
VUE+axios+php實(shí)現(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了VUE+axios+php實(shí)現(xiàn)圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了vue中如何使用jest單元測(cè)試，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08