快捷導(dǎo)航

Vue實現(xiàn)全選多個選擇框

更新時間：2025年01月30日 07:00:36 作者：孫悟空

使用v-model綁定布爾變量實現(xiàn)全選功能：定義數(shù)組存儲狀態(tài),使用v-for循環(huán)渲染選擇框,綁定狀態(tài)；添加全選復(fù)選框,綁定布爾變量；使用watch監(jiān)聽全選復(fù)選框狀態(tài)變化,更新數(shù)組中每一項的狀態(tài)

Vue全選多個選擇框

可以使用 v-model 來綁定一個布爾類型的變量來實現(xiàn)全選多個選擇框的功能。

具體步驟

如下：

在data中定義一個數(shù)組，用來存儲所有需要選擇的項的狀態(tài)。
在模板中使用 v-for 指令循環(huán)渲染每個選擇框，并將每個選擇框的狀態(tài)綁定到數(shù)組中對應(yīng)的項上。
在模板中添加一個全選復(fù)選框，將其狀態(tài)綁定到一個布爾類型的變量上。
使用 watch 監(jiān)聽全選復(fù)選框的狀態(tài)變化，當(dāng)全選復(fù)選框的狀態(tài)改變時，遍歷數(shù)組中的每一項，將其狀態(tài)設(shè)置為全選復(fù)選框的狀態(tài)即可。

示例代碼

<template>
  <div>
    <input type="checkbox" v-model="selectAll"> 全選
    <div v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked"> {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectAll: false,
      items: [
        { label: '選項1', checked: false },
        { label: '選項2', checked: false },
        { label: '選項3', checked: false },
      ],
    };
  },
  watch: {
    selectAll(val) {
      this.items.forEach(item => {
        item.checked = val;
      });
    },
  },
};
</script>

在上面的代碼中，我們定義了一個 selectAll 變量來表示全選復(fù)選框的狀態(tài)，一個 items 數(shù)組來存儲所有需要選擇的項的狀態(tài)。

在模板中，使用 v-for 指令循環(huán)渲染每個選擇框，并將每個選擇框的狀態(tài)綁定到數(shù)組中對應(yīng)的項上。同時，還添加了一個全選復(fù)選框，并將其狀態(tài)綁定到 selectAll 變量上。

在 watch 中，監(jiān)聽 selectAll 變量的變化，當(dāng)它的狀態(tài)改變時，遍歷 items 數(shù)組中的每一項，將其狀態(tài)設(shè)置為 selectAll 的狀態(tài)即可實現(xiàn)全選功能。