vue 表格里 根据数组对象里面的某个属性值进行从大到小,从小到大排序 (vue表格日期排序)
<template>
<div class="hello">
<el-table :data="newList" stripe style="width: 100%">
<el-table-column prop="data" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
computed: {
newList() {
/* -----------排序-------------------- */
/* let arr = [];
this.list.map(item => arr.push(item.data));
function sortNum(a, b) {
// return b - a;// 从大到小排序
return a - b; //从小到大排序
}
arr.sort(sortNum);
let arr2 = [];
arr.forEach((v, i) => {
this.list.forEach(res => {
if (res.data === v) {
arr2.push(res);
}
});
});
return arr2; // 从大到小排序 */
/* -----------从小到大排序-------------------- */
/* let arr = [];
this.list.map(item => arr.push(item.data));
arr.sort();
let arr2 = [];
arr.forEach((v, i) => {
this.list.forEach(res => {
if (res.data === v) {
arr2.push(res);
}
});
});
return (this.list = arr2);//从小到大排序 */
/* ---------根据某个属性值排序1--------------------- */
/* function compare(prop) {
return function(a, b) {
let v1 = a[prop];
let v2 = b[prop];
// return v1 - v2;//从小到大排序
return v2 - v1; // 从大到小排序
};
}
return this.list.sort(compare("data")); */
/* ---------根据某个属性值排序2--------------------- */
// return this.list.sort((a, b) => { return b.data - a.data });/* 从大到小排序 */
return this.list.sort((a, b) => { return a.data - b.data });/* 从小到大排序 */
}
},
data() {
return {
list: [
{ name: "zs3", data: "20200110", age: 10 },
{ name: "zs6", data: "20200113", age: 13 },
{ name: "zs2", data: "20200109", age: 9 },
{ name: "zs8", data: "20200115", age: 15 },
{ name: "zs4", data: "20200111", age: 11 },
{ name: "zs1", data: "20200108", age: 8 },
{ name: "zs7", data: "20200114", age: 14 },
{ name: "zs5", data: "20200112", age: 12 }
]
};
}
};
</script>
网友评论