vue中手写table的升降序

　　有些时候，我们总是无可避免的需要自己去手撸一些东西，因为需求总是在不断的变化。例如，最开始的需求，我们只是在首页展示一个数据列表，此时，我们可能直接就自己手写了一个table，后来，突然增加了一个需求，例如：需要在一些指定的列上面增加排序功能。此时，由于我们的样式和界面都已经调整好了，如果再去重新使用第三方的一些vue组件，会觉得没必要浪费时间，于是，很可能，就需要自己动手去增加一个这样的功能。如下图所示：

　　

　　封装的组件“DataTable.vue”，代码如下：

<template>
  <table class="table">
    <thead>
      <tr>
        <th>{{title}}</th>
        <th v-if="title!='建筑'"
            @click="onClickHead('count',0)">项目总数（个）<i v-if="filed=='count'"
             :class="getIcon(0)"></i></th>
        <th @click="onClickHead('objArea',1)">总面积（㎡）<i v-if="filed=='objArea'"
             :class="getIcon(1)"></i></th>
        <th @click="onClickHead('objEnergy',2)">今日总用电（kWh)<i v-if="filed=='objEnergy'"
             :class="getIcon(2)"></i></th>
        <th @click="onClickHead('objAreaEnergy',3)">能耗密度（kWh/㎡）<i v-if="filed=='objAreaEnergy'"
             :class="getIcon(3)"></i></th>
        <th @click="onClickHead('personEnergy',4)">人均能耗（kWh/人）<i v-if="filed=='personEnergy'"
             :class="getIcon(4)"></i></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in filterData"
          :key="index"
          :class="{'default':title=='建筑'}"
          @click="jumpToDistrict(item)">
        <td>{{item.objName}}</td>
        <td v-if="title!='建筑'">{{item.count}}</td>
        <td>{{item.objArea}}</td>
        <td>{{item.objEnergy}}</td>
        <td>{{item.objAreaEnergy}}</td>
        <td>{{item.personEnergy}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '区域'
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      filed: 'count', //排序字段-当前
      arrOrderAsc: [false, true, true, true, true], //默认第一项降序
      curCellIndex: 0, //当前排序列索引
      filterData: []
    }
  },
  watch: {
    dataList: {
      handler: function (val) {
        if (val && val.length > 0) {
          this.getOrderData();
        }
      },
      immediate:true,
      deep: true, //深度监听设置为 true
    }
  },
  methods: {
    getOrderData () {
      let list = this.dataList.map(m => {
        return {
          objName: m.objName,
          count: m.regionsList ? m.regionsList.length : 0,
          objArea: m.objArea,
          objEnergy: m.objEnergy,
          objAreaEnergy: m.objAreaEnergy,
          personEnergy: m.personEnergy
        }
      });
      this.filterData = this.arrOrderAsc[this.curCellIndex] ? list.sort(this.compareAsc(this.filed)) : list.sort(this.compareDesc(this.filed));
    },
    jumpToDistrict (item) {
      console.log('item :>> ', item);
      if (this.title == '建筑') return;
      this.$emit('jumpToDistrict', { id: item.objId, name: item.objName, regionsList: m.regionsList });
    },
    //升序--这是比较函数
    compareAsc (p) {
      return function (m, n) {
        var a = m[p];
        var b = n[p];
        return a - b;
      }
    },
    //降序--这是比较函数
    compareDesc (p) {
      return function (m, n) {
        var a = m[p];
        var b = n[p];
        return b - a;
      }
    },
    //点击排序列
    onClickHead (val, index) {
      this.filed = val;
      this.curCellIndex = index;
      this.arrOrderAsc[index] = !this.arrOrderAsc[index];
      this.getOrderData();
    },
    //获取升降序图标
    getIcon (index) {
      return this.arrOrderAsc[index] ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
table thead,
tbody tr,
tfoot tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  text-align: center;
}
.table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  color: white;
  tr {
    height: 28px;
    line-height: 28px;
  }
  thead {
    background: rgba(97, 160, 236, 0.12);
    cursor: pointer;
  }
  tbody {
    display: block;
    height: 150px;
    overflow-y: auto;
    @include scrollbarHomeV;
    background: linear-gradient(
      180deg,
      rgba(19, 34, 98, 0.6) 0%,
      ragb(9, 22, 56, 0.6) 100%
    );
    tr {
      cursor: pointer;
      &:hover {
        color: #26c8f6;
        background: rgba(40, 54, 77, 0.5);
      }
      &.default {
        cursor: default;
      }
    }
  }
  caption {
    text-align: left;
    padding-bottom: 4px;
  }
}
</style>

公共样式代码variables.scss，此处主要是自定义滚动样式

$headHeight:80px;//导航条高度
$mainBgColor:#081338; //主体背景颜色
$scrollbarColorHome:#135786; //首页滚动条样式
$hoverColor: #7abef9; //链接hover颜色
/*-----------------------------首页定义滚动条样式------------------*/
@mixin scrollbarHomeV($w: 10px, $h: 12px) {

  /*webkit内核*/
  &::-webkit-scrollbar {
    width: $w;
    /*滚动条宽度*/
    height: $h;
    /*滚动条高度*/
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(19, 87, 134, 0.1);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: $scrollbarColorHome;
    -webkit-box-shadow: inset 0 0 6px rgba(19, 87, 134, 0.5);
    min-height: 40px;

    &:hover {
      background: $scrollbarColorHome;
    }
  }

  &::-webkit-scrollbar-thumb:window-inactive {
    background: $scrollbarColorHome;
  }
}

完