最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
使用vue.js实现checkbox的全选和多个的删除功能
时间:2017-04-14 编辑:简简单单 来源:一聚教程网
template代码:
代码如下 | 复制代码 |
{{selectArr}} 全选 |
script部分:
代码如下 | 复制代码 |
varproData = [{ "name":"j1ax" }, { "name":"j2ax" }, { "name":"j3ax" }, { "name":"j4ax" }] exportdefault{ 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 = []; varlen =this.proData.length; for(vari = 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); }); } } } } |
-
上一个: js实现横向拖拽导航条功能
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31