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>
  • 相关阅读:
    二分图匹配初步
    动态规划初步
    一些排日程的经典方法
    petri网初步
    笔记:美国院士教你写论文
    Ubuntu18.04彻底删除MySQL数据库
    ubuntu18.04 安装 wps2019
    ubuntu18.04 阿里镜像源
    Ubuntu 18.04 使用标准Ubuntu 仓库进行自动化安装NVIDIA驱动
    linux maven环境变量配置
  • 原文地址:https://www.cnblogs.com/exmyth/p/7885199.html
Copyright © 2011-2022 走看看