使用vue.js實現checkbox的全選和多個的刪除功能
阿新 • • 發佈：2017-11-23
ons eth table padding ted rip fun lpad let
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<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 { //實現全選
_this.selectArr = [];
_this.proData.forEach(function(item, i) {
_this.selectArr.push(i);
});
}
}
}
}
</script>
|
使用vue.js實現checkbox的全選和多個的刪除功能