使用vue.js实现checkbox的全选和多个的删除功能
程序员文章站
2022-06-07 23:28:38
template代码：
-
template代码：
<template> <div 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> <input type="checkbox" class="checkbox" @click="selectall" />全选 </label> </div> </template>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 { //实现全选 _this.selectarr = []; _this.prodata.foreach(function(item, i) { _this.selectarr.push(i); }); } } } } </script>以上所述是小编给大家介绍的使用vue.js实现checkbox的全选和多个的删除功能，希望对大家有所帮助
推荐阅读
-
JS实现复选框的全选和批量删除功能
-
使用Bootstrap和Vue实现用户信息的编辑删除功能
-
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
-
vue使用vant中的checkbox实现全选功能
-
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
-
使用vue.js实现checkbox的全选和多个的删除功能
-
基于vue.js实现checkbox的全选和批量删除功能实例代码
-
使用Bootstrap和Vue实现用户信息的编辑删除功能
-
基于vue.js实现checkbox的全选和批量删除功能实例代码
-
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
-