el-table多层级树形数据的选中处理

实现效果

在这里插入图片描述

表头
 <el-table
    ref="elTable"
     v-loading="loading"
     size="mini"
     element-loading-text="加载中"
     element-loading-spinner="el-icon-loading"
     :data="tableData"
     row-key="id"
     border
     :row-class-name="rowClassNameFun"
     :header-row-class-name="headerRowClassName"
     @select="selectFun"
     @select-all="selectAllFun"
   >
方法
// 递归处理表格树形数据
 handleData(tableData) {
   if (tableData.length !== 0) {
     for (const item of tableData) {
       // 用于处理层级表格选择(isSelect:false:不选中,true:选中,'half':中间状态)
       item.isSelect = false // 默认为不选中
       if (item.children && item.children.length !== 0) {
         this.handleData(item.children)
       }
     }
   }
   return tableData
 }// 复选框点击事件
 selectFun(selection, row) {
    this.setRowIsSelect(row)
  },
// 复选框点击事件
setRowIsSelect(row) {
   // 当点击父级点复选框时,当前的状态可能为未知状态,所以当前行状态设为false并选中,即可实现子级点全选效果
  if (row.isSelect == 'half') {
      row.isSelect = false
      this.$refs.elTable.toggleRowSelection(row, true)
    }
    row.isSelect = !row.isSelect
    const that = this
    function selectAllChildrens(data) {
      data.forEach((item) => {
        item.isSelect = row.isSelect
        that.$refs.elTable.toggleRowSelection(item, row.isSelect)
        if (item.children && item.children.length) {
          selectAllChildrens(item.children)
        }
      })
    }
    function getSelectStatus(selectStatuaArr, data) {
      data.forEach((childrenItem) => {
        selectStatuaArr.push(childrenItem.isSelect)
        if (childrenItem.children && childrenItem.children.length) {
          getSelectStatus(selectStatuaArr, childrenItem.children)
        }
      })
      return selectStatuaArr
    }
    function getLevelStatus(row) {
       // 如果节点有父节点,但没有子节点,那么这个节点的层级状态为3
      // 如果节点有父节点,并且有子节点,那么层级状态为2
      // 如果节点没有父节点,但有子节点,那么层级状态为1
     // 如果节点既没有父节点,也没有子节点,则层级状态为4
      if (row.parentId) {
        if (!row.children || !row.children.length) {
          return 3
        } else {
          return 2
        }
      } else {
        if (row.children && row.children.length) {
          return 1
        } else {
          return 4
        }
      }
    }
    let result = {}
     // 获取明确的节点
     function getExplicitNode(data, parentId) {
       data.forEach((item) => {
         if (item.id == parentId) {
           result = item
         }
         if (item.children && item.children.length) {
           getExplicitNode(item.children, parentId)
         }
       })
       return result
     }
     function operateLastLeve(row) {
       // 操作的是子节点  1、获取父节点  2、判断子节点选中个数,如果全部选中则父节点设为选中状态,如果都不选中,则为不选中状态,如果部分选择,则设为不明确状态
       let selectStatuaArr = []
       const item = getExplicitNode(that.tableData, row.parentId)
       selectStatuaArr = getSelectStatus(selectStatuaArr, item.children)
       if (
         selectStatuaArr.every((selectItem) => {
           return selectItem == true
         })
       ) {
         item.isSelect = true
         that.$refs.elTable.toggleRowSelection(item, true)
       } else if (
         selectStatuaArr.every((selectItem) => {
           return selectItem == false
         })
       ) {
         item.isSelect = false
         that.$refs.elTable.toggleRowSelection(item, false)
       } else {
         item.isSelect = 'half'
       }
       // 则还有父级
       if (item.parentId) {
         operateLastLeve(item)
       }
     }
      // 判断操作的是子级点复选框还是父级点复选框,如果是父级点,则控制子级点的全选和不全选
      // 1、只是父级 2、既是子集,又是父级 3、只是子级
      const levelSataus = getLevelStatus(row)
      if (levelSataus == 1) {
        selectAllChildrens(row.children)
      } else if (levelSataus == 2) {
        selectAllChildrens(row.children)
        operateLastLeve(row)
      } else if (levelSataus == 3) {
        operateLastLeve(row)
      }
    },
    // 检测表格数据是否全选
    checkIsAllSelect() {
      this.oneProductIsSelect = []
      this.tableData.forEach((item) => {
        this.oneProductIsSelect.push(item.isSelect)
      })
      // 判断一级产品是否是全选.如果一级产品全为true,则设置为取消全选,否则全选
      const isAllSelect = this.oneProductIsSelect.every((selectStatusItem) => {
        return selectStatusItem == true
      })
      return isAllSelect
    },
    // 表格全选事件
    selectAllFun(selection) {
      const isAllSelect = this.checkIsAllSelect()
      this.tableData.forEach((item) => {
        item.isSelect = isAllSelect
        this.$refs.elTable.toggleRowSelection(item, !isAllSelect)
        this.selectFun(selection, item)
      })
    },
    // 表格行样式 当当前行的状态为不明确状态时,添加样式,使其复选框为不明确状态样式
    rowClassNameFun({ row }) {
      if (row.isSelect == 'half') {
        return 'indeterminate'
      }
    },
    // 表格标题样式 当一级目录有为不明确状态时,添加样式,使其全选复选框为不明确状态样式
    headerRowClassName({ row }) {
      const oneProductIsSelect = []
      this.tableData.forEach((item) => {
        oneProductIsSelect.push(item.isSelect)
      })
      if (oneProductIsSelect.includes('half')) {
        return 'indeterminate'
      }
      return ''
    }
样式
::v-deep .indeterminate {
  .el-checkbox__input {
    &.is-checked {
      .el-checkbox__inner::after {
        transform: scale(0.5);
      }
    }
    .el-checkbox__inner {
      background-color: #30AD89 ;
      border-color: #30AD89;
    }
    .el-checkbox__inner::after {
      content: "";
      position: absolute;
      display: block;
      background-color: #fff;
      height: 2px;
      transform: scale(0.5);
      left: 0;
      right: 0;
      top: 5px;
      width: auto !important;
      border-color: #c0c4cc !important;
    }
  }
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值