vue3 全選與取消功能實作

在網頁製作中可能會遇到需要全選、取消全選的情形。那麼該如何使用vue達成這個功能呢？

現在很多網站例如電商、個人blog、sns等等都會出現這類型的基本功能：

當我們勾選全選，會讓所有選項都被圈選，而取消時所有選項都會一併取消勾選。同時如果一項一項地勾選項目直到所有都選取，也一樣會讓全選變成勾選的狀態。

//判斷是否全選
const isAllSelected = computed({
      get() {

//如果都全選就回傳true
        return items.value.every((item) => item.selected);
      },
      set(value) {
//當勾選/取消勾選的時候會同步更新item的狀態
        items.value.forEach((item) => {
          item.selected = value;
        });
      },
    });

  // 計算屬性：獲取選中的項目
    const selectedCount = computed(() =>
      items.value.filter((item) => item.selected.length)
    );

彙整成要實現的功能如下：

• 可以單獨勾選
• 點擊全選時，所有選項都會被勾起來
• 所有選項都打勾時全選也會打勾
• 在全選打勾的情況下，再點一次變成取消，有選擇的選項都會變成未勾選

我們可以設想一下會遇到的問題和功能，並將他拆解成一個個的步驟

1. 每個元素都具備一個選取的功能
2. 建立全選還有取消全選的按鈕
3. 全選鈕狀態的改變要如何呈現
4. 元素隨著全選按鈕所因應的變化

實作流程

接下來開始實作

從資料開始，假設我們的資料是以object保存，並且帶有選取的屬性

在vue3中，要記得物件跟字串都必須用ref()聲明響應式的狀態

同時我們在取用的時候都要用.value才能獲取數據

單一選項

javascript

const items = ref([
        { selected: false },
        { selected: false },
        { selected: false },
        { selected: false },
      ])

template

1. 使用v-for建立選擇列表
2. 使用v-model可以直接綁定勾選狀態(checked 的屬性以及 change 事件)

    <div v-for="(item, index) in items" :key="index" class="checkbox-item">
      <label>
        <input
          type="checkbox"
          v-model="item.selected"
        />
        第 {{ index + 1 }}項
      </label>
    </div>

全選按鈕

template

1. 使用input建立checkbox
2. 使用label建立元素的說明
3. 同樣使用v-model綁定狀態

    <label>
      <input type="checkbox" v-model="isAllSelected"/>
      全選 / 取消全選
    </label>

總共選擇的項目

    <p>已選擇數量: {{ selectedCount }}</p>

javascript

• get與set的用法：

get不能寫入數值，只能用return，set可以帶入參數

另一種不用v-model而是用v-bind+@change的方式

v-bind:目前勾選狀態:true/false(用computed)

@change:當勾選時要執行的動作(function)

    <label>
      <input type="checkbox" :checked="isAllSelected" @change="toggleSelectAll" />
      全選/取消全選
    </label>

    // 計算屬性：判斷是否已全選
    const isAllSelected = computed(() =>
      items.value.every((item) => item.selected)
    );

    // 計算屬性：獲取選中的項目
    const selectedCounts = computed(() =>
      items.value.filter((item) => item.selected.length)
    );

    // 全選/取消全選功能
    const toggleSelectAll = () => {
      const newState = !isAllSelected.value; // 切換全選狀態
      items.value.forEach((item) => {
        item.selected = newState;
      });
    };