Vue 实现checkbox的全选，单选和删除

最新推荐文章于 2024-05-16 10:30:37 发布

原创最新推荐文章于 2024-05-16 10:30:37 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

本文介绍了使用Vue.js创建一个带有全选和单选功能的列表，以及如何实现选中项的删除操作。通过监听checkbox状态，动态更新选中项目的ID数组，并提供了一个全选按钮来切换所有项目的选中状态。此外，当有项目被选中时，删除按钮将启用，允许用户移除选中的条目。

<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.id)返回包含fruit的下标, 若不包含则返回-1-->
         <input type='checkbox' :checked="fruitIds.indexOf(fruit.id)>=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) {
    // checkbox单选去重
        let idIndex = this.fruitIds.indexOf(fruitId)
        if (idIndex >= 0) {
          // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
          this.fruitIds.splice(idIndex, 1)
        } else {
          // 选中该checkbox
          this.fruitIds.push(fruitId)
        }
        //单个全部选中了，全选要勾上
        if (this.fruitIds.length === this.fruits.length) {
            this.isCheckedAll = true;
        }else{
            this.isCheckedAll = false
        }
    },
    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>