表格中表格排序通用方法

最新推荐文章于 2022-12-07 13:33:30 发布

二水你要努力啊

最新推荐文章于 2022-12-07 13:33:30 发布

阅读量387

点赞数

分类专栏： Vue 文章标签：表格表头

本文链接：https://blog.csdn.net/qq_33601443/article/details/103238395

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

需求是，一个表格有几种排序方式，每次只按其中一种方式排序，切换排序方式的时候，默认倒序

在这里插入图片描述

<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,           //是否以readNumber排序
     readNumberSortDown : true,    //是否以readNumber的倒序排序

     relativeNumberFlag:0,
     relativeNumberSortDown:true,

     timeFlag : 0,
     timeSortDown : true,

     sortType:['readNumber','relativeNumber','time']   //用来重置
}

methods:{
	ifClickFirst(target) {
      return target == 0 ? true : false
    },

    /*
     *@params readNumber
     *@return "阅读量"    //需要传递给后端的字段名
     */
    chageName(typeName){
      let toName = ''
      // console.log(typeName)
      switch (typeName) {
        case 'readNumber':
          toName = '阅读量'
          break;
        case 'relativeNumber':
          toName = '互动量'
          break;
        case 'time':
          toName = '发布时间'
          break;
        default:
          break;
      }
      return toName
    },
    
    /*
     *@params readNumber   //当前点击的表头
    */
	sortHandle(typeName){
      let typeFlag = typeName + 'Flag'
      let typeSortDown = typeName + 'SortDown'
      
      let apiName = this.chageName(typeName)

      //重置别的表头相关字段
      this.sortType.forEach((item)=>{
        if(item != typeName){
          // console.log(this[item + 'Flag'])
          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')
      }
    },
}