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;
  }
}

完