需求是,一个表格有几种排序方式,每次只按其中一种方式排序,切换排序方式的时候,默认倒序
<th>
<span class="cursor-pi" @click="sortHandle('readNumber')" //点击事件的判断
:style="{color:readNumberFlag?sortArrowColor.up:sortArrowColor.down}"> //选中表头颜色的判断
阅读量
<i :class="arrowSortDown('readNumber')" ></i> //上下箭头判断
</span>
</th>
<th>
<span class="cursor-pi" @click="sortHandle('relativeNumber')"
:style="{color:relativeNumberFlag?sortArrowColor.up:sortArrowColor.down}">
互动量
<i :class="arrowSortDown('relativeNumber')"></i>
</span>
</th>
<th class="title-width">
<span class="cursor-pi" @click="sortHandle('time')"
:style="{color:timeFlag?sortArrowColor.up:sortArrowColor.down}">
发布时间
<i :class="arrowSortDown('time')" >
</i>
</span>
</th>
data(){
readNumberFlag : 1,
readNumberSortDown : true,
relativeNumberFlag:0,
relativeNumberSortDown:true,
timeFlag : 0,
timeSortDown : true,
sortType:['readNumber','relativeNumber','time']
}
methods:{
ifClickFirst(target) {
return target == 0 ? true : false
},
chageName(typeName){
let toName = ''
switch (typeName) {
case 'readNumber':
toName = '阅读量'
break;
case 'relativeNumber':
toName = '互动量'
break;
case 'time':
toName = '发布时间'
break;
default:
break;
}
return toName
},
sortHandle(typeName){
let typeFlag = typeName + 'Flag'
let typeSortDown = typeName + 'SortDown'
let apiName = this.chageName(typeName)
this.sortType.forEach((item)=>{
if(item != typeName){
this[item + 'Flag'] = 0
this[item + 'SortDown'] =true
}
})
if(this.ifClickFirst(this[typeFlag])){
this[typeFlag] = 1
this.$emit('sortHandle',apiName,'desc')
return
}
this[typeSortDown] = !this[typeSortDown]
console.log( this[typeSortDown] )
if(this[typeSortDown]){
this.$emit('sortHandle',apiName,'desc')
}else{
this.$emit('sortHandle',apiName,'asc')
}
},
}