Vue 实现复选框全选,反选,单选,多选(简易版)
实现效果:
HTML代码:
<template>
<div>
<div style="background-color: #f4f4f4;margin:50px 0 0 260px;width:900px;height:500px;padding:50px">
<ul style="list-style: none">
<li>
<el-checkbox v-model="allChecked" @change="handleAllChecked">全选</el-checkbox>
</li>
<li v-for="(item,index) in testList" :key="index">
<el-checkbox v-model="item.isChecked" @change="handleChecked(item,$event)">{{ item.id }}</el-checkbox>
</li>
</ul>
</div>
</div>
</template>
js代码:
<script>
export default {
data () {
return {
allChecked: false,
testList: [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 }
]
}
},
watch: {
testList: { // 监听事件,监听复选框是否全部选中,全部选中则全选的复选框勾选上
handler(val) {
var i = 0
this.testList.forEach(item => {
if (item.isChecked === true) {
i++
}
if (i === this.testList.length) {
this.allChecked = true
} else {
this.allChecked = false
}
})
},
deep: true
}
},
created() {
this.testList.forEach(item => { // 处理后端传过来的数据,如果没有可以判断是否勾选复选框的字段,则需给数据作处理,加上一个isChecked字段,判断复选框勾选
this.$set(item, 'isChecked', false) // 添加判断的字段
})
},
methods: {
handleAllChecked(v) { // 实现全选,反选(点击会传递true或者false过来)
this.testList.map(item => {
item.isChecked = v
})
},
handleChecked(item, e) { // 单个选中
item.isChecked = e
}
}
}
</script>
转发链接:https://blog.csdn.net/LONGYog/article/details/124727326