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的全选,单选以及删除的主要内容,如果未能解决你的问题,请参考以下文章

vue.js实现checkbox的全选和反选

js 脚本怎样实现checkbox的全选,反选,类似邮箱中邮件的全选后删除移动

Vue实现单选、全选和反选

练习-checkbox 全选 ,反选, 单选,以及取值

数据列表的全选反选以及批量操作

Django框架---jquery实现checkbox的单选和全选