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

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

零下一度
零下一度original
2017-05-02 10:00:292754parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn