Exemple de code pour implémenter toutes les fonctions de sélection et de suppression par lots basées sur vue.js

Cet article présente principalement l'utilisation de vue.js pour réaliser la sélection complète et les fonctions de suppression multiples de la case à cocher. Les amis dans le besoin peuvent se référer au

code du modèle :

<template> 
<p class="hello"> 
<ul> <li v-for="(item, index) in proData"> 
<label for=""> 
<input type="checkbox" :value="index" v-model="selectArr"> 
</label>{{item.name}} 
</li>： 
</ul> 
<button type="" @click="del">删除</button>{{selectArr}} 
<label> 
1
<input type="checkbox" class="checkbox" @click="selectAll" />全选 
</label> 
</p> 
</template>

. Partie du script :

<script>
var proData = [{
  "name": "j1ax"
}, {
  "name": "j2ax"
}, {
  "name": "j3ax"
}, {
  "name": "j4ax"
}]
export default {
  name: &#39;hello&#39;,
  data() {
    return {
      proData: proData,
      selectArr: []
    }
  },
  created() {
    this.$http.get(&#39;/api/home&#39;).then(function(response) {
      response = response.body;
      this.proData = response.data;
    })
  },
  methods: {
    del() {
      let arr = [];
      var len = this.proData.length;
      for (var i = 0; i < len; i++) {
        if (this.selectArr.indexOf(i)>=0) {
          console.log(this.selectArr.indexOf(i))
        }else{
          arr.push(proData[i])
        }
      }
      this.proData = arr;
      this.selectArr = []
    },
    selectAll(event) {
      var _this = this;
      console.log(event.currentTarget)
      if (!event.currentTarget.checked) {
        this.selectArr = [];
      } else { //实现全选
        _this.selectArr = [];
        _this.proData.forEach(function(item, i) {
          _this.selectArr.push(i);
        });
      }
    }
  }
}
</script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!