美文网首页工作总结
vue table 表格中 checkbox 全选 、反选、单选

vue table 表格中 checkbox 全选 、反选、单选

作者: 轩轩小王子 | 来源:发表于2019-02-16 19:16 被阅读0次

全选

handleAllClick(){  //@click.prevent="handleAllClick"  :checked="selectAllChecked"

          if(this.selectAllChecked){

              //全选->全不选

              for (let i = 0, length = this.currentPageList.length; i < length; i++) {

                    if (this.currentPageList[i].isChecked && (this.currentPageList[i].isDisabled == false)) {

                        this.currentPageList[i].isChecked = false;

                    }

                }

                this.resetSelectedEditCountList(); //重置选择列表

          }else{

              // 不全选->全选

                let uTempArr = [];

                for (let i = 0, length = this.currentPageList.length; i < length; i++) {

                    if ((!this.currentPageList[i].isChecked) && (this.currentPageList[i].isDisabled == false)) {

                        this.currentPageList[i].isChecked = true;

                        uTempArr.push(this.currentPageList[i]);

                    }

                }

                this.resetSelectedEditCountList("insert", uTempArr);

          }

            this.selectedListCheckedAllStateChanged(); 

        },

重置已选列表中可编辑数量列表 只支持删除单个对象,多个对象时直接重置

resetSelectedEditCountList(action = "reset", arr) {

            if (action === "reset") {

                this.selectedEditCountList = [];

                this.tableList.forEach(function (item) {

                    if (item.checked) {

                        this.selectedEditCountList.push(item);

                    }

            }, this)

            } else if (action === "remove") { // employeeId 后台返回 todo

                for (let i = 0;i < this.selectedEditCountList.length; i++) {

                    if (typeof arr === "object" && arr.id === this.selectedEditCountList[i].id) {

                        this.selectedEditCountList.splice(i, 1);

                        return;

                    }

                }

            } else {

                    this.selectedEditCountList = this.selectedEditCountList.concat(arr);

            }

        },

已选列表全选复选框状态变更

selectedListCheckedAllStateChanged: function () {

            let isAllChecked = true;

            this.currentPageList.forEach(function (item) {

                if(item.hasOwnProperty('isChecked')){ //判断一个对象是否有某个属性

                    if (item.isChecked !== true) {

                        isAllChecked = false;

                    }

                }

            });

            this.selectAllChecked = isAllChecked;

        }

每个checkbox 点击

itemHandleClick(item,index){

          if(!item.isChecked){

              this.currentPageList[index].isChecked = true;

              this.resetSelectedEditCountList("insert", item);

          }else{

              this.currentPageList[index].isChecked = false;

              this.resetSelectedEditCountList("remove", item);

          }

          this.selectedListCheckedAllStateChanged();

      },

相关文章

网友评论

    本文标题:vue table 表格中 checkbox 全选 、反选、单选

    本文链接:https://www.haomeiwen.com/subject/unyieqtx.html