• 使用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>
  • 相关阅读:
    macOS 系统下载地址
    docker基本使用-nginx
    adb命令安装apk
    docker基本使用-常用命令
    docker基本使用-安装
    Vue技术点整理-vue.config.js
    flutter环境部署
    Android webview 问题记录
    Node 使用webpack编写简单的前端应用
    前端api管理工具YApi
  • 原文地址:https://www.cnblogs.com/exmyth/p/7885199.html
Copyright © 2020-2023  润新知