state: {
list: [{
checked: false,
id: 11,
title: "商品标题111",
cover: "/static/images/demo/list/1.jpg",
},
{
checked: false,
id: 12,
title: "商品222",
cover: "/static/images/demo/list/1.jpg",
},
{
checked: false,
id: 13,
title: "商品333",
cover: "/static/images/demo/list/1.jpg",
}
],
selectedAll: [] //存放选中ID
},
用vuex,在js中自己模拟一个列表数据,定义一个空的数组selectedAll,实现全选全不选要把checked全部改成true或者false,如果为true,把list里面id全部存入selectedAll中,如果为false,就把selectedAll变为空数组
mutations: {
//全选
selectAll(state){
state.selectedAll=state.list.map(v=>{
v.checked = true
return v.id
})
},
//全不选
unselectAll(state){
state.selectedAll=[]
state.list.map(v=>{
v.checked = false
})
}
},
全部选中或者不全选中时,如果selectedAll长度与list长度相等时就全选(用前面存入的id进行长度判断)
getters: {
checkedAll(state){
return state.selectedAll.length==state.list.length
}
}
在actions中用三元表达式进行判断
actions: {
docheckedAll(context){
context.getters.checkedAll? context.commit('unselectAll'): context.commit('selectAll')
}
}
在要点击的页面中
<label @click="docheckedAll">
<radio :checked="checkedAll"></radio>
</label>
引入vuex
import {mapState,mapActions,mapGetters} from 'vuex'
computed:{
...mapState({ list:state=>state.cart.list}),
...mapGetters(['checkedAll'])
},
methods: {
...mapActions(['docheckedAll'])
},
单选按钮实现 给单选按钮添加一个点击事件selectItem,并且添加一个鼠标点击的索引
<view v-for="(item,index) in list" :key="index">
<label @click="selectItem(index)">
<radio :checked="item.checked" />
</label>
<view >
methods: {
...mapMutations(['selectItem']) ,
...mapActions(['docheckedAll'])
},
在js页面 定义一个i,判断selectedAll中是否含有id,如果有就把里面的checked改为false,删除这个i,反之则改为true
//单选
mutations:{
selectItem(state,index){
let id = state.list[index].id
let i = state.selectedAll.indexOf(id)
if(i!==-1){
state.list[index].checked=false
state.selectedAll.splice(i,1)
}else{
state.list[index].checked=true
state.selectedAll.push(id)
}
},
}