element-ui树形表格层级选择

效果展示

代码

//template
<el-table
    ref="multipleTable"
    v-loading="dataListParams.loading"
    :data="dataList"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    border
    default-expand-all
    row-key="pk_id"
    @select="rowSelect"
    @select-all="selectAll"
  >

//数据
data() {
    
    
      return {
    
    
        originalData: [], //后台返回的原始数据
        dataList: [], //树形函数转换后的树形结构数据
      }
    },

// 树形数据转换工具
/**
 * @description 父子关系的数组转换成树形结构数据
 * @param data
 * @param pKey
 * @returns {*}
 */
export function translateDataToTree(list, pKey = 'parent_id') {
    
    
  let data = JSON.parse(JSON.stringify(list))
  const parent = data.filter(
    (value) =>
      value[pKey] === 'undefined' || value[pKey] == null || value[pKey] == 0
  )
  const children = data.filter(
    (value) =>
      value[pKey] !== 'undefined' && value[pKey] != null && value[pKey] > 0
  )
  const translator = (parent, children) => {
    
    
    parent.forEach((parent) => {
    
    
      children.forEach((current, index) => {
    
    
        if (current[pKey] === parent.pk_id) {
    
    
          const temp = JSON.parse(JSON.stringify(children))
          temp.splice(index, 1)
          translator([current], temp)
          typeof parent.children !== 'undefined'
            ? parent.children.push(current)
            : (parent.children = [current])
        }
      })
    })
  }
  translator(parent, children)
  return parent
}

/**
 * @description 树形结构数据转换成父子关系的数组
 * @param data
 * @returns {[]}
 */
export function translateTreeToData(list) {
    
    
  let data = JSON.parse(JSON.stringify(list))
  const result = []
  data.forEach((item) => {
    
    
    const loop = (data) => {
    
    
      const child = data.children
      if (child) {
    
    
        for (let i = 0; i < child.length; i++) {
    
    
          loop(child[i])
        }
        delete data.children
      }
      result.push(data)
    }
    loop(item)
  })
  return result
}

//方法
/*注意在获取初始数据时，所有节点（包括子节点）都增加一个isChecked 标志参数*/
      rowSelect(selection, row) {
    
    
        //递归修改子节的状态
        this.selectByRecursion(row, !row.isChecked)
        //检测是否需要修改父节点状态
        this.isCheckParent(selection, row)
      },
      //全选
      selectAll(selection) {
    
    
        //获取selection中一级菜单的数量，与全部一级数量对比，获取当前是 全部选择 or 全部取消
        let firstMenu = selection.filter((item) => item.parent_id === 0)
        this.$refs.multipleTable.data.map((items) => {
    
    
          this.selectByRecursion(
            items,
            firstMenu.length === this.dataList.length
          )
        })
      },
      /**
       * 递归修改子节点状态
       * @param startItem 当前节点
       * @param status 状态
       */
      selectByRecursion(startItem, status) {
    
    
        //修改当前节点状态
        this.$refs.multipleTable.toggleRowSelection(startItem, status)
        startItem.isChecked = status
        if (startItem.children) {
    
    
          startItem.children.forEach((item) =>
            this.selectByRecursion(item, status)
          )
        }
      },
      /**
       * 检测是否需要修改父节点状态
       * @param selection 所有已选项
       * @param row 当前节点
       */
      isCheckParent(selection, row) {
    
    
        if (row.parent_id === 0) return
        //获取当前节点 的 父节点包含的 所有字节点
        let allChild = this.originalData.filter(
          (item) => item.parent_id === row.parent_id
        )
        //获取当前节点 的 父节点包含的 所有字节点  中 已选中的节点
        let selectChild = selection.filter(
          (item) => item.parent_id === row.parent_id
        )
        //查找父节点
        let parentItem = this.getParentItem(
          this.$refs.multipleTable.data,
          row.parent_id
        )
        //如果当前为选中状态，判断父节点是否需要选中
        if (row.isChecked) {
    
    
          if (selectChild.length === allChild.length) {
    
    
            this.$refs.multipleTable.toggleRowSelection(parentItem, true)
            parentItem.isChecked = true
          }
        } else {
    
    
          //如果当前为未选中状态，判断父节点是否需要取消选中
          if (selectChild.length !== allChild.length) {
    
    
            this.$refs.multipleTable.toggleRowSelection(parentItem, false)
            parentItem.isChecked = false
          }
        }
      },
      /**
       * 递归查找父节点 （效率一般，可以更改查找模式）
       * @param list 循环列表
       * @param pId 查找的父节点id
       * @param pItem 查找到的值
       * @returns {null}
       */
      getParentItem(list, pId, pItem = null) {
    
    
        list.some((item) => {
    
    
          if (item.pk_id === pId) {
    
    
            pItem = item
            return true
          } else if (item.children && item.children.length > 0) {
    
    
           	pItem = this.getParentItem(item.children, pId, pItem)
            return !!pItem
          } else {
    
    
            return false
          }
        })
        return pItem
      },