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>
  • 相关阅读:
    一些经验
    倍增(在线)求LCA
    IDA*算法——骑士精神
    A*算法——第K短路
    (持续更新)一些黑科技和技巧
    逆元
    方便人类——信息学训练专用库
    PHP单点登陆
    PHP 中运用 elasticsearch
    PHP斐波那契数列
  • 原文地址:https://www.cnblogs.com/exmyth/p/7885199.html
Copyright © 2011-2022 走看看