vue 实现全选功能 watch 方法

最新推荐文章于 2022-09-05 17:31:10 发布

置顶 cheguang03

最新推荐文章于 2022-09-05 17:31:10 发布

阅读量437

点赞数 2

本文链接：https://blog.csdn.net/cheguang03/article/details/104709781

版权

<!DOCTYPE html>
<html lang="cn">
<head>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      　　<input type="checkbox" @click="checkAll" v-model="checked">
      　　<span>全选</span>
           --------
      　<input type="button" @click="removeAll" value="删除所选">
    </div>
    <ul>
      　　<li v-for="(item,index) in list" :key="index" style="margin-top:20px;">
        　　　　<input type="checkbox" v-model="checkModel" :value="item.id">
        　　　　<span>{{item.name}}--</span>
        　　　　<span>{{item.age}}--</span>
        　　　　<span>{{item.money}}元</span>
        　　　　<button @click="remove(index)" type="primary">删除</button>
        　　</li>
    </ul>

  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        list: [{
            id: 1,
            name: "红酒",
            age: 10,
            money: 100
          },
          {
            id: 2,
            name: "白酒",
            age: 15,
            money: 200
          },
          {
            id: 3,
            name: "雄黄酒",
            age: 28,
            money: 300
          }
        ],
        checked: false, //是否全选
        checkModel: [] //用于监听的数组 ，里面有id
      }
    },
    watch: {
      checkModel() { //监听的数组
        if (this.list.length != this.checkModel.length) {
          this.checked = false
        } else {
          this.checked = true
        }
      }

    },
    methods: {
      remove(index) { //删除单个
        this.list.splice(index, 1)
        this.checkModel = []
      },
      checkAll() { //全选的按钮
        if (this.checked) {
          this.checkModel = []
        } else {
          for (let i = 0; i < this.list.length; i++) {
            if (this.checkModel.findIndex(ele => ele == this.list[i].id) == -1) {
              this.checkModel.push(this.list[i].id)
            }
          }

        }
      },
      removeAll() { //删除所有的
        var arr = []
        for (let i = 0; i < this.list.length; i++) { 
          if (this.checkModel.findIndex(ele => ele == this.list[i].id) == -1) { //筛选出未勾选的数组
            arr.push(this.list[i])
          }

        }
        this.list = arr
        this.checkModel = []
      }
    }

  })
</script>

</html>

如需优化请指正

cheguang03

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue 实现全选功能 watch 方法

<!DOCTYPE html><html lang="cn"><head> <title>Document</title></head><body> <div id="app"> <div> 　　<input type="checkbox" @cli...
复制链接

扫一扫