标签：父级 refs element item isAllSelect ui isSelect 树型 row

最终实现结果

 由于element-ui没有原始api来实现这种全选，半选，所以自己写了一点

        @select="selectFun"
        @selectAll="selectAllFun"
        element-ui的原始方法

表格数据初始化

this.tableData =====> 表格数据
this.tableData.map(item => {
    this.$set(item, 'isSelect', false); //默认父级不选中
    item.children.map(childItem => {
        this.$set(childItem, 'isSelect', false); //默认子级不选中
    }
}

设置当前点击的复选框应该呈现出的状态的具体方法

setRowClickStatus(row) {
    //点击父级复选框时，当前的状态可能为半选，所以当前行状态设为false并选中，即可实现子级点全选效果
    if(row.isSelect === '') {
        row.isSelect = false;
        this.$refs.table.$refs.refTable.toggleRowSelection(row, true);//element自带事件
    }
    row.isSelect = !row.isSelect;
    //判断点击的是子级复选框还是父级复选框，如果是父级就控制子级的状态
    if(row.children) {
        //含有children字段，操作的是父级
        row.children.map(item => {
            item.isSelect = row.isSelect;
            this.$refs.table.$refs.refTable.toggleRowSelection(item, item.isSelect);
        })
    } else {
        //操作的是子级，控制父级的选中，不选中，半选
        let parentId = row.parentId; //数据中的父级id字段
        this.tableData.map(item => {
            let isAllSelect = [];
            if(item.catelogid == parentId){ //自身id匹配到点击的id相同
                item.children.map(childItem => {
                    isAllSelect.push(childItem.isSelect);
                })
                if(isAllSelect.every(slectItem => true == slectItem )){
                    item.isSelect = true;
                    this.$refs.table.$refs.refTable.toggleRowSelection(item, true);
                } else if (isAllSelect.every(selectItem => false == selectItem)){
                    item.isSelect = false;
                    this.$refs.table.$refs.refTable.toggleRowSelection(item, false);
                } else{
                    item.isSelect = ''; //半选状态
                }
            }
        })
    }
}

复选框点击事件

selectFun(selection, row) {
    this.setRowClickStatus(row);
}

点击表头全选事件

1.检测表格数据是否全选
checkIsAllSelect() {
    let oneLevelIsSelect = [];
    this.tableData.map(item => {
        oneLevelIsSelect.push(item.isSelect);
    })
    let isAllSelect = oneLevelIsSelect.every(levelItem => true == levelItem );
    retrun isAllSelect;
}


2.全选事件
selectAllFun(selection) {
    let isAllSelect = this.checkIsAllSelect();
    this.tableData.map(item => {
        item.isSelect = isAllSelect;
        this.$refs.table.$refs.refTable.toggleRowSelection(item, !isAllSelect);
        this.selectFun(selection, item);
    })
}

控制自定义的父级半选样式

1.表格父级半选样式:headerCellClassName="headerRowClassName"
headerRowClassName({ row }){
    let oneLevelIsSelect = [];
    this.tableData.map(item => {
        oneLevelIsSelect.push(item.isSelect);
    })
    if(oneLevelIsSelect.includes('')) {
        return 'indeterminate-custom';
    }
    return "";
}

2.css样式
    .indeterminate-custom {
      .el-checkbox__input {
        .el-checkbox__inner {
          background-color: #409eff !important;
          border-color: #409eff !important;
          color: #fff !important;
          &::before {
            content: '';
            position: absolute;
            display: block;
            background-color: #FFF;
            height: 2px;
            transform: scale(.5);
            left: 0;
            right: 0;
            top: 5px;
          }
          &::after {
              content: none;
          }
        }
      }
    }

标签：父级,refs,element,item,isAllSelect,ui,isSelect,树型,row
来源： https://blog.csdn.net/qq_36626404/article/details/120887214

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。