vue实现列表的复选框,单选,多选
不适用组件库的方式,实现列表的单选,多选。一,在获取到列表数据赋值给parkList后,动态的添加checked属性为false// 将列表parkList进行遍历动态添加checked为falsethis.parkList.map(item => {this.$set(item, 'checked', false)})二,将复选框绑定checked属性,属性值为动态添加checked。&l
·
不适用组件库的方式,实现列表的单选,多选。
一,在获取到列表数据赋值给parkList后,动态的添加checked属性为false
// 将列表parkList进行遍历动态添加checked为false
this.parkList.map(item => {
this.$set(item, 'checked', false)
})
二,将复选框绑定checked属性,属性值为动态添加checked。
<-- 通过v-for生成的,每一行前面的复选框,item为v-for的每一项 -->
<input type="checkbox" :checked="item.checked" @click="changeChecked(item.id)">
三,实现单选事件,方法很简单,代码如下。
changeChecked(id) {
this.parkList.map(item => {
if(item.id === id) {
item.checked = !item.checked
}
})
},
四,将标题的复选框绑定一个data中的状态值,
<-- 顶部标题行前面控制全选和全不选的复选框 -->
<input type="checkbox" v-model="checkAll" @click="checkedAll()">
data() {
return {
checkAll: false
}
}
五,实现全选和全不选方法
如果点击全选的复选框,此时checkAll为false,遍历将每一行的复选框绑定的checked属性设为true,再次点击将,相反。。。设为false。
方法里面的checkAll为点击改变之前的布尔值。
checkedAll() {
if(this.checkAll) {
this.parkList.map(item => {
item.checked = false
})
} else {
this.parkList.map(item => {
item.checked = true
})
}
},
更多推荐
已为社区贡献3条内容
所有评论(0)