ant-design-vue的table組件后端排序

table組件后端排序

在使用ant-design-vue的表格組件的時候，當數據量過大時，就需要點擊相應的列，調用后端接口排序

后端排序步驟：

• 在<Table></Table>組件中開啟 :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
        })
      },
  

• 為表格設置相應的列排序事件

    <Table  :columns="checkedToshowHeader" :data-source="tableData" ref="table"  
             :scroll="(checkedToshowHeader.length>=8)?{ x: 1500 }:{x:false}"
              :loading="loading"
               :sortDirections="['descend', 'ascend']"
              :rowKey="(record, index) => index"
               xScrollPlacement="tableBottom"
              :pagination="pageOpt"
              @change="onChangeSort"
            >
  

• 在對應事件中開啟排序

  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 中則是排序字段