zoukankan      html  css  js  c++  java
  • 使用vue.js实现checkbox的全选和多个的删除功能

    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>
  • 相关阅读:
    内存管理工具
    c语言目录操作总结
    重写strstr、strcpy、memcpy、memset、atof算法
    统计编码量工具
    hdu4348
    bzoj4358: permu
    bzoj2658: [Zjoi2012]小蓝的好友(mrx)
    bzoj2657: [Zjoi2012]旅游(journey)
    bzoj3583: 杰杰的女性朋友
    bzoj3673 bzoj3674可持久化并查集
  • 原文地址:https://www.cnblogs.com/exmyth/p/7885199.html
Copyright © 2011-2022 走看看