Ant Design Vue中table组件，排序时，首行始终不动

一、业务场景

在使用table表格时，经常会有排序的需求。有时，客户要求排序（不论升降序），首行不受影响。而antdv的table中，没有直接可以使用的api，本文就是解决这样的问题。

二、效果展示

三、思路

对sort函数加个判断

table组件中的sort函数，实际上是一个冒泡排序。我们只需要在排序时，加一个判断（当前是升序还是降序，是否首行）。 table组件中的相关api有change事件及sorter函数。

具体实现

（1）对要首行展示的数据，加一个判断标识（eg:本处使用的是provinceCode）。

（2）change事件中，其形参sorter.order便是当前排序顺序，ascend（升序），descend（降序）。 由冒泡排序可知，要使其始终在首行。升序时，返回值为正数最大值。降序时，返回值为负数最大值。 相关代码：

Dom
    <a-table
      class="partTable"
      :columns="columns__province"
      :data-source="fold_province ? TableShow_province : TableData_province"
      :pagination="false"
      rowKey="provinceCode"
      @change="change__province"
      :locale="{
        emptyText: '暂无数据'
      }"
    >
      <span slot="num" slot-scope="num">
        {{ num | NumberFormatSp }}
      </span>
      <span slot="rate" slot-scope="rate"> {{ rate }}% </span>
    </a-table>
JS
    data{
        return{
            columns__province: [
                {
                  title: '完成数',
                  sorter: (a, b) => {
                    let result = a.num - b.num
                    if (this.sort_province === 'ascend') {
                      if (a.provinceCode === '0' || b.provinceCode === '0') {
                        result = 99999999
                      }
                    }
                    return result
                  }
                },
                {
                  title: '完成率(%)',\
                  sorter: (a, b) => {
                    let result = a.rate - b.rate
                    if (this.sort_province === 'ascend') {
                      if (a.provinceCode === '0' || b.provinceCode === '0') {
                        result = 99999999
                      }
                    } else if (this.sort_province === 'descend') {
                      if (a.provinceCode === '0' || b.provinceCode === '0') {
                        result = -99999999
                      }
                    }
                    return result
                  }
                }
              ],
              sort_province:null
        }
    }，
    methods:{
        getProvinceData() {
          DigitalAccountCourseProv().then(res => {
            res = [
              {
                provinceName: '北京',
                courseAccounted: '0.6',
                courseFinishUser: '999999',
                provinceCode: '0'
              },
              {
                provinceName: '山西',
                courseAccounted: '0.9',
                courseFinishUser: '9999',
                provinceCode: '10'
              },
              {
                provinceName: '陕西',
                courseAccounted: '0.8',
                courseFinishUser: '8888',
                provinceCode: '20'
              }
            ]
            this.TableData_province = res.map((item, index) => {
              let { provinceName, courseAccounted, courseFinishUser, provinceCode } = item
              return {
                id: ('0' + (index + 1)).slice(-2),
                name: provinceName,
                num: courseFinishUser,
                rate: (courseAccounted * 100).toFixed(2),
                provinceCode
              }
            })
            // 初始展示前五
            this.TableShow_province = this.TableData_province.filter((item, index) => {
              return index < 5
            })
          })
        },
        change__province(pagination, filters, sorter, { currentDataSource }) {
          this.sort_province = sorter.order
        }
    }
复制代码

四、尾言

有帮助的话，点个赞哈！