Use vue. js to select all checkbox and batch Delete instance code

This article describes how to use vue. js implements the entire checkbox selection and multiple deletion functions. For more information about how to use vue, see the following article. js implements the entire checkbox selection and multiple deletion functions. For more information, see

Template code:

  
  
 
  
 
 
   
  
   {Item. name }}
:
  
 
 
  Delete{SelectArr }}
  1Select All 
  
 
 

Script:

Script var proData = [{"name": "j1ax" },{ "name": "j2ax" },{ "name": "j3ax "}, {"name": "j4ax"}] export default {name: 'hello', data () {return {proData: proData, selectArr: [] }}, created () {this. $ http. get ('/api/home '). 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 {// select all _ this. selectArr = []; _ this. proData. forEach (function (item, I) {_ this. selectArr. push (I) ;}}}} script

The above is the detailed content of the Instance code that implements the full selection and batch deletion function of checkbox Based on vue. js. For more information, see other related articles in the first PHP community!