<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.table1 {
display: flex;
align-items: center;
justify-content: flex-start;
}
.tableTitle, .tableList {
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: 100px;
margin-bottom: 10px;
}
.listItem {
margin-right: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="table1">
<div class="tableTitle" v-for="(item,index) in tableTitleList" :key="index" @click="sortFn(item.str, item)">
<div>
<div>{{item.lable}}</div>
</div>
<span v-if="item.showImg&&sortDataLeft[item.str][2]">不排序</span>
<span v-if="item.showImg&&sortDataLeft[item.str][1]">降序</span>
<span v-if="item.showImg&&sortDataLeft[item.str][0]">升序</span>
</div>
</div>
<div class="tableList" v-for="(item,index) in formDataRender" :key="index">
<div class="listItem">
<div class="item"> <span>{{item.data}}</span> </div>
</div>
<div class="item">{{item.number}}</div>
</div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
vm = new Vue({
el:"#app",
data() {
return {
tableTitleList:[
{lable:'日期',click:true,showImg:true,value:'',str:'sortOne'},
{lable:'数字',click:true,showImg:true,value:'',str:'sortTwo'}
],
sortValLeft:'sortOne', //默认日期
sortValDirectionLeft:2, //默认不排序
sortValData:{sortOne:'data',sortTwo:"number"}, //数据对应的字段
sortDataLeft:{
sortOne:[false, false,true],
sortTwo:[false, false,true]
},
defaultData:[
{data:1587298533082,number:112},
{data:1587398533080,number:12323},
{data:1587398533080,number:144},
{data:1587398533080,number:1},
{data:1587398533080,number:1121212},
{data:1587398533080,number:1},
{data:1587398533080,number:121},
{data:1589398533080,number:3},
{data:1587398533080,number:233},
{data:1584398533080,number:6},
{data:1587198533080,number:7},
{data:1586398533080,number:1111},
{data:1587398533080,number:321},
{data:1587398533080,number:12},
],
formDataRender:[]
}
},
created () {
this.formDataRender = this.defaultData
},
methods:{
// 数据排序
sortFn(item, obj) {
if (!obj.click) {
return
}
if (item !== this.sortValLeft) {
this.sortValDirectionLeft = 2
}
this.sortValLeft = item
this.sortFnPublic('sortDataLeft',this.sortValLeft,'sortValDirectionLeft')
this.formDataRender = this.sortValFn(JSON.parse(JSON.stringify(this.defaultData)))
},
sortFnPublic(data,value,directionVal) {
for(let k in this[data]) {
if(k === value) {
if(this[data][k][0] === true) {
this[data][k][0] = false
this[data][k][1] = true
this[data][k][2] = false
this[directionVal] = 1
}else if(this[data][k][1] === true) {
this[data][k][0] = false
this[data][k][1] = false
this[data][k][2] = true
this[directionVal] = 2
}else if(this[data][k][2] === true) {
this[data][k][0] = true
this[data][k][1] = false
this[data][k][2] = false
this[directionVal] = 0
}
} else {
this[data][k] = [false,false,true]
}
}
},
sortValFnPublic(reqData,returnData,directionVal, sortVal) {
if(this[directionVal] === 2) {
return JSON.parse(JSON.stringify(this.defaultData))
}else {
let num = []
if(this[directionVal] === 0) {
// 升序
num = [1,-1,0]
}else {
// 降序
num = [-1,1,0]
}
returnData = reqData.sort((a,b) => {
if(Number(b[this.sortValData[this[sortVal]]]) < Number(a[this.sortValData[this[sortVal]]])) {
return num[0]
}else if(Number(b[this.sortValData[this[sortVal]]])>Number(a[this.sortValData[this[sortVal]]])) {
return num[1]
} else {
return num[2]
}
})
return returnData
}
},
sortValFn(data) {
if(data && data.length) {
let returnData = []
returnData = this.sortValFnPublic(data,returnData,'sortValDirectionLeft','sortValLeft')
return returnData
}
}
}
})
</script>
排序，默认排序 sortfield ='all', 标准价正序倒序 sortfield ='priceStandUp'、sortfield ='priceStandDown'， 上市时间正序倒序 sortfield ='listedTimeUp'、sortfield ='listedTimeDown'
网友评论