提姆寫程式

0%

Vue 筆記 - 使表格資料按照資料條件排序

發表於 更新於 分類於 Disqus：
v-for、v-if、v-on:click、v-bind 動態增加 class、sort 排序方法使用

vue.js

練習主題

有一 table 表格，透過點擊資料條件細目，使 table 項目按照資料順序排列，由小至大或由大至小。

  • 有 click 事件。
  • 使用到 sort 的方法。
  • 使用 v-for 傳入 data 資料。
  • 使用 v-if 做判斷。
  • 使用 v-bind 動態增加 class 名稱。

建立 table 表格

首先建立一個表單，並把 th 寫好，架構基本上就完成了。

1
2
3
4
5
6
7
8
9
10
11
12
<table class="table">
  <thead>
    <tr>
      <th>品名</th>
      <th>價格</th>
      <th>到期日</th>
    </tr>
    <tr>
      <td></td>
    </tr>
  </thead>
</table>

建立 data 資料

目前範例沒有使用 AJAX，是使用現有的 data 資料，所以建立在 Vue 物件中的 data 屬性中，這個資料是一個 JSON 格式，也將其資料用一個變數 data 存放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
data: {
  data: [
    {
      name: "巧呼呼蘇打水",
      price: 30,
      expiryDate: 90,
    },
    {
      name: "心驚膽跳羊肉飯",
      price: 65,
      expiryDate: 2,
    },
    {
      name: "郭師傅武功麵包",
      price: 32,
      expiryDate: 1,
    },
    {
      name: "不太會過期的新鮮牛奶",
      price: 75,
      expiryDate: 600,
    },
    {
      name: "金殺 巧粒粒",
      price: 120,
      expiryDate: 200,
    },
  ];
}

匯入資料

使用 v-for 匯入資料，在 td 的外層 tr 中，使用v-for，這樣就會將依序帶入 td 中。

官方文件表示：2.2.0+ 的版本里，当在组件上使用 v-for 时，key 现在是必须的。

所以程式碼如下，並於 td 中透過模板語法顯示我們要顯示的內容。

1
2
3
4
5
<tr v-for="item in sortData" :key="item.price">
       <td>{{ item.name }}</td>
       <td>{{ item.price }}</td>
       <td>{{ item.expiryDate }}</td>
     </tr>

判斷條件

HTML

在要點擊與判斷的項目是加上 click 事件與 v-if 判斷條件，以價格為例：

  1. 點擊事件對應的 changeType() 方法，其參數帶入 price ，要在點擊價錢後會依照價錢的資料多寡要做排序。
  2. 將上下反轉的圖示獨立出來，用 <span> 包住 fontawesome 的標籤，並在 span 上做判斷是否為上或下。
  3. 到期日方式一樣，故照本宣刻。
  4. 因為會使用共同的樣式設定，所以 class 名稱也設定為一樣就可避免重工。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<th class="click" @click="changeType('price')">
  價格
  <!-- isReverse 為反轉 className -->
  <span class="icon" :class="{'inverse': isReverse}" v-if="sortType == 'price'">
    <i class=" fas fa-angle-up text-success"></i>
  </span>
</th>
<th class="click" @click="changeType('expiryDate')">
  到期日
  <span
    class="icon"
    :class="{'inverse': isReverse}"
    v-if="sortType == 'expiryDate'"
  >
    <i class=" fas fa-angle-up text-success"></i>
  </span>
</th>

Vue

建立 methods 跟 computed，因 @click 一定會對應到 methods，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
data:{
data[...],
 sortType: "price",
    isReverse: false
},
 methods: {
    changeType: function (type) {
      var vm = this;
      if (vm.sortType == type) {
        vm.isReverse = !vm.isReverse;
      } else {
        vm.isReverse = false;
      }
      vm.sortType = type;
    }
  },
  computed: {
    sortData() {
      var vm = this;
      var type = vm.sortType;
      return vm.data.sort(function (a, b) {
        if (vm.isReverse) return b[type] - a[type];
        else return a[type] - b[type];
      });
    }
  }

  1. 設定排列類型條件名稱為 sortType，其值設定為 price，isReverse 是設定 font-awesome 圖案的方向初始條件(CSS 是設定為往上)。

  2. changeType 方法說明：

    • changeType(type) 宣告一個 vm 變數為自己(this)，如果 vue 物件的 sortType 為 type 的時候，就可以完成開關，若不符合這個條件，則設定值為 false。
    • 最後面這行 vm.sortType = type; 是同步給到期日自己的判斷來使用。

  3. computed 屬性結果說明：

    • 宣告 vm 變數為 computed 運算方法本身(this)。

      vue 包裝後的 this，在不同屬性中不會互相影響。

    • data 中的 sortType 預設值為 price，所以使用 price 這個順序來排列。
    • 宣告 type 變數為 vm.sortType 的這個值。
    • 回傳 data 的排序，使用 sort 的方法，並給予判斷式讓 type 由小至大或是由大至小來排列。