vue 实现checkbox的全选,单选以及删除
Posted Iven_Han
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 实现checkbox的全选,单选以及删除相关的知识,希望对你有一定的参考价值。
如有疑问, 微博留言 韩峰26
话不多说, 直接上代码.
<template> <div> <input type=\'checkbox\' class=\'input-checkbox\' :checked="fruitIds.length === fruits.length" @click=\'checkedAll()\'>全选 <div v-for=\'(fruit, index) in fruits\' :key="index"> <!--判断fruitIds是否包含当前fruit,fruitIds.indexOf(fruit.fruitId)返回包含fruit的下标, 若不包含则返回-1--> <input type=\'checkbox\' :checked="fruitIds.indexOf(fruit.fruitId)>=0" name=\'checkboxinput\' class=\'input-checkbox\' @click=\'checkedOne(fruit.id)\'> </div> <!--默认删除按钮不能点击, 当选中某一checkbox时可以删除--> <button :disabled="!fruitIds.length>0" value="Delete" @click="deleteFruits()">Delete</button> </div> </template>
<script> export default { data () { return { fruits:[{ id:\'1\', value:\'苹果\' },{ id:\'2\', value:\'荔枝\' },{ id:\'3\', value:\'香蕉\' },{ id:\'4\', value:\'火龙果\' }], fruitIds:[\'1\',\'3\',\'4\'], // 初始化全选按钮, 默认不选 isCheckedAll: false } }, methods:{ checkedOne (fruitId) { let idIndex = this.fruitIds.indexOf(fruitId) if (idIndex >= 0) { // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态) this.fruitIds.splice(idIndex, 1) } else { // 选中该checkbox this.fruitIds.push(fruitId) } }, checkedAll () { this.isCheckedAll = !this.isCheckedAll if (this.isCheckedAll) { // 全选时 this.fruitIds = [] this.fruits.forEach(function (fruit) { this.fruitIds.push(fruit.fruitId) }, this) } else { this.fruitIds = [] } }, deleteFruits () { } } } </script>
以上是关于vue 实现checkbox的全选,单选以及删除的主要内容,如果未能解决你的问题,请参考以下文章