vue中手寫table的升降序

　　有些時候，我們總是無可避免的需要自己去手擼一些東西，因為需求總是在不斷的變化，例如，最開始的需求，我們只是在首頁展示一個資料串列，此時，我們可能直接就自己手寫了一個table，后來，突然增加了一個需求，例如：需要在一些指定的列上面增加排序功能，此時，由于我們的樣式和界面都已經調整好了，如果再去重新使用第三方的一些vue組件，會覺得沒必要浪費時間，于是，很可能，就需要自己動手去增加一個這樣的功能，如下圖所示：

　　封裝的組件“DataTable.vue”，代碼如下：

<template>
  <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'"
             :></i></th>
        <th @click="onClickHead('personEnergy',4)">人均能耗（kWh/人）<i v-if="filed=='personEnergy'"
             :></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 = https://www.cnblogs.com/jiekzou/archive/2021/02/21/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;
  }
}

完

標籤：其他

上一篇：斗魚無延遲

下一篇：030_JavaScript