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>
  • 相关阅读:
    Java异常之初认识二
    Java异常之初认识
    enum类型用于switch语句
    数组指定元素查找 之 二分法查找
    数组元素查找 之 线性查找
    数组的反转
    枚举类 Enum 之初认识
    求数组元素的最大值,最小值,总和,平均数
    clone()方法引发的对protected权限修饰符的思考
    完成一个朋友圈的表设计
  • 原文地址:https://www.cnblogs.com/exmyth/p/7885199.html
Copyright © 2011-2022 走看看