vue实现全选传值

Vue实现全选传值的方法

使用v-model绑定全选状态

在Vue中，可以利用v-model指令轻松实现全选功能。需要准备一个数组来存储选中的项，以及一个计算属性来控制全选状态。

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectAll = !this.selectAll
    }
  }
}
</script>

使用watch监听选择变化

另一种方法是使用watch来监听选择变化，当选中项数量与总项数一致时自动勾选全选框。

<template>
  <div>
    <input type="checkbox" v-model="isAllSelected"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: [],
      isAllSelected: false
    }
  },
  watch: {
    selectedItems(newVal) {
      this.isAllSelected = newVal.length === this.items.length
    },
    isAllSelected(newVal) {
      if (newVal) {
        this.selectedItems = this.items.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    }
  }
}
</script>

使用自定义事件传递选中值

如果需要将选中的值传递给父组件，可以使用自定义事件。

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item.id" @change="emitSelected">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['items'],
  data() {
    return {
      selectedItems: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? this.items.map(item => item.id) : []
        this.$emit('selected', this.selectedItems)
      }
    }
  },
  methods: {
    toggleAll() {
      this.selectAll = !this.selectAll
    },
    emitSelected() {
      this.$emit('selected', this.selectedItems)
    }
  }
}
</script>

使用Vuex管理选中状态

在大型应用中，可以使用Vuex来集中管理选中状态。

// store.js
export default new Vuex.Store({
  state: {
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    selectedItems: []
  },
  mutations: {
    TOGGLE_ALL(state, payload) {
      state.selectedItems = payload ? state.items.map(item => item.id) : []
    },
    TOGGLE_ITEM(state, payload) {
      const index = state.selectedItems.indexOf(payload)
      if (index > -1) {
        state.selectedItems.splice(index, 1)
      } else {
        state.selectedItems.push(payload)
      }
    }
  },
  getters: {
    isAllSelected: state => {
      return state.selectedItems.length === state.items.length
    }
  }
})

<template>
  <div>
    <input type="checkbox" :checked="isAllSelected" @change="toggleAll"> 全选
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" :checked="isSelected(item.id)" @change="toggleItem(item.id)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['items', 'selectedItems']),
    ...mapGetters(['isAllSelected']),
    isSelected() {
      return id => this.selectedItems.includes(id)
    }
  },
  methods: {
    ...mapMutations(['TOGGLE_ALL', 'TOGGLE_ITEM']),
    toggleAll(e) {
      this.TOGGLE_ALL(e.target.checked)
    },
    toggleItem(id) {
      this.TOGGLE_ITEM(id)
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，都能有效实现Vue中的全选功能并传递选中值。