table组件后端排序

在使用ant-design-vue的表格组件的时候，当数据量过大时，就需要点击相应的列，调用后端接口排序

后端排序步骤：

• 在

  组件中开启 :sortDirections="['descend', 'ascend']"

• 在计算属性中对表格数据的表头columns，设置相应的字段

   // 勾选则显示表头
      checkedToshowHeader() {
        // return this.customHeaderData.filter((item) => {
        //   return item.itemIsChecked === true || item.hiddenCol==true
        // });
       let { sortedInfo } = this
        sortedInfo = sortedInfo || {}
  
        return this.customHeaderData.map(item=>{
          // 
          if(item.key =="applyTime"){
              item.sortOrder = sortedInfo.columnKey === 'applyTime' && sortedInfo.order,
              item.sorter= true
          }
          if(item.key =="activeTime"){
              item.sortOrder = sortedInfo.columnKey === 'activeTime' && sortedInfo.order,
              item.sorter= true
          }
          if(item.key =="createTime"){
              item.sortOrder = sortedInfo.columnKey === 'createTime' && sortedInfo.order,
              item.sorter= true
          }
          return item
  
        }).filter((item)=>{
           return item.itemIsChecked === true || item.hiddenCol==true
        })
      },
  

• 为表格设置相应的列排序事件

    
  
  在对应事件中开启排序
  onChangeSort (pagination, filters, sorter) { 
        console.log('%c ?? pagination: ', 'font-size:20px;background-color: #ED9EC7;color:#fff;', pagination);
        this.sortedInfo = sorter
        if (sorter.order) {
          this.order = sorter.field || 'createTime'
          this.sort = sorter.order === 'ascend' ? 'asc' : 'desc'
        } else {
          this.order = ''
          this.sort = ''
        }
        if (pagination.pageSize !== this.condition.pageSize) {
          // this.currentPage = 1
          // this.pageSize = pagination.pageSize
          this.updateSelectCondition({pageSize: pagination.pageSize,pageNo:1})
        } else {
          // this.currentPage = pagination.current
          // this.pageSize = pagination.pageSize
           this.updateSelectCondition({pageSize: pagination.pageSize,pageNo:pagination.current})
        }
        this.updateSelectCondition({
          sortName: this.order,
          sortOrder: this.sort
        })
  
        this.update()
      },
  
  
  sorter.order中则是升序或者降序
  sorter.field 中则是排序字段
  
  
  							
  							
  			ant-design-vue							
  						
  
  
  
  						
  
  						
  相关
  						
  				
  						
  			
  
  																
  								
  
  										
  Ant-Design-Vue中关于Form组件的使用
  									
  									
  
  								 
  
          
  								
  							
  							
  
  																
  								
  
  										
  fatal: unable to access 'https://github.com/vueComponent/ant-design-vue-pro.'
  									
  									
  
  								 
  
          
  								
  							
  							
              
              
              
                                      
             
    			
  						
  
  					
  
  														
  					
  					
  
  					
  									
  
  					
  									   
  标签