vue实现批量选择
Vue 实现批量选择的方法
使用 v-model 绑定数组
在 Vue 中，可以利用 v-model 绑定一个数组来实现多选框的批量选择。当复选框被选中时，对应的值会被添加到数组中。
<template>
<div>
<div v-for="item in items" :key="item.id">
<input type="checkbox" :value="item.id" v-model="selectedItems">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
}
}
}
</script>添加全选功能
可以通过计算属性或方法实现全选功能。以下是一个计算属性的实现方式：
<template>
<div>
<input type="checkbox" v-model="selectAll" @change="toggleSelectAll">
Select All
<div v-for="item in items" :key="item.id">
<input type="checkbox" :value="item.id" v-model="selectedItems">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
}
},
computed: {
selectAll: {
get() {
return this.selectedItems.length === this.items.length
},
set(value) {
this.selectedItems = value ? this.items.map(item => item.id) : []
}
}
},
methods: {
toggleSelectAll() {
this.selectAll = !this.selectAll
}
}
}
</script>使用 Vuex 管理状态
如果项目使用 Vuex 进行状态管理，可以将批量选择的状态存储在 Vuex 中：
// store.js
export default new Vuex.Store({
state: {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
},
mutations: {
setSelectedItems(state, payload) {
state.selectedItems = payload
}
}
})在组件中通过 mapState 和 mapMutations 使用：
<template>
<div>
<div v-for="item in items" :key="item.id">
<input type="checkbox" :value="item.id" v-model="selectedItems">
{{ item.name }}
</div>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['items', 'selectedItems'])
},
methods: {
...mapMutations(['setSelectedItems'])
}
}
</script>使用第三方库
如果需要更复杂的功能，可以考虑使用第三方库如 vue-multiselect：
<template>
<div>
<multiselect
v-model="selectedItems"
:options="items"
:multiple="true"
label="name"
track-by="id"
></multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
selectedItems: []
}
}
}
</script>以上方法可以根据项目需求选择适合的实现方式。
