关于element-plus的el-tree 组件常用属性及api及控制可拖动层级，el-tree 自定义全选单选数据小笔记

toastLi

4061人浏览 · 2024-03-19 17:51:57

toastLi · 2024-03-19 17:51:57 发布

一、关于配置拖动el-tree 常用配置

draggable	是否开启拖拽节点功
:allow-drop	拖拽时判定目标节点能否成为拖动目标位置
allow-drag	判断节点能否被拖拽如果返回 `false` ，节点不能被拖动	'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
highlight-current	能是否高亮当前选中节点，默认值是 false。
@node-click="handleNodeClick"	处理点击之后数据
:default-expanded-keys="[101]"	默认展开的节点的 key 的数组
default-checked-keys 如果配置复选框	默认勾选的节点的 key 的数组

 <el-tree
          v-if="isOpenAllLoading"
          style="width: 100%"
          :allow-drop="allowDrop"
          :allow-drag="allowDrag"
          :data="BranchLists"
          draggable
          :default-expand-all="isOpenAllBranch"
          node-key="id"
          :default-expanded-keys="[]"
          :current-node-key="[]"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"
          @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span class="tree_label">{{ node.label }} </span>
              <span style="color: #0274f7" @click.stop>
                      
                <a type="text" @click.stop="createdBranch(node, data)" v-if="node.level != 4"
                  >新建</a
                >
                <a type="text" @click.stop="eidtBranchhandle(node, data)">编辑</a>
              </span>
            </span>
          </template>
        </el-tree>
// 处理激活数据

const handleNodeClick = (node) => {
  console.log('handleNodeClick showBrandId', node)
  search( node.id)
  // 刷新列表
  // getist( node.id)
}

1 需要控制最大层级 tree 当前到第几可拖动 :allow-drop="allowDrop"

allow-drop 拖拽时判定目标节点能否成为拖动目标位置。如果返回 false ，拖动节点不能被拖放到目标节点。 type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 Function(draggingNode, dropNode, type)

// 禁止拖动到第四级
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  console.log('🚀 ~ allowDrop ~ dropNode:', dropNode, type)
  if (dropNode.level === 4) {
    return type !== 'inner'
  } else {
    return true
  }
}

2 @check-change="handleCheckbranch" 方法收集选择标识

const checkDeptIdList = ref([]) // 收集已选择ids 标识数组
//数据ids收集
const handleCheckbranch = (data: any, checked: boolean, isSelected: boolean) => {
  let idsList: Array<any> = checkDeptIdList
  if (checked) {
    idsList.push(data.id)
    // 选择父级子集id回收
    if (data.children && data.children.length) {
      const childIds = getAllIds(data.children)
      idsList.push(...childIds)
    }
  } else {
    idsList = (idsList || []).filter((item) => item !== data.id)
  }
 checkDeptIdList.value = [...new Set(idsList)] // 去重
}

3 拖动配置激活Ui 样式自定义

   :deep(.el-tree) {
        .el-tree-node.is-current > .el-tree-node__content {
          background-color: #d9ecff;
          color: #409eff; // 节点的字体颜色
          font-weight: bold; // 字体加粗
        }
      }

4 el-tree 自定义全选单选数据子集不关联父级通过check-strictly设置

 <el-tree
                      ref="treeRef0"
                      style="max-width: 260px; min-height: 120px"
                      :data="branchTreeLsit"
                      show-checkbox
                      highlight-current
                      node-key="id"
                      :expand-on-click-node="false"
                      :check-on-click-node="false"
                      check-strictly
                      :default-checked-keys="roleIds"
                      :default-expanded-keys="From.specifiedDeptIdList"
                      @check-change="handleCheckbranchs"
                      :props="{
                        children: 'children',
                        label: 'name'
                      }"
                    />


const roleIds = ref([]) //目标ids arr
// 通过check-change 方法实现选择  父级可全选子集 子集不选择父级 全选配置分配树常用
// 指定部门全选 反向
const handleCheckbranchs = async (node, isSelect, isSelectChild) => {
  console.log(22222222, node, isSelect, isSelectChild)
  await getChildrenNodeKey(node, isSelect)
  treeRef0.value!.setCheckedKeys([...roleIds.value])  // 设置选中的树key
}


// 获取当前选中节点的子节点key 添加及删除
const getChildrenNodeKey = (node: any, type: boolean) => {
  if (type) {
   roleIds.value.push(node?.id)
  } else {
    const index = roleIds.value.indexOf(node.id)
    if (index != -1) {
      roleIds.value.splice(index, 1)
    }
  }
  roleIds.value = [0, ...new Set(roleIds.value)]
  if (node.children?.length > 0) {
    node.children.forEach((item: any) => {
      if (item.children?.length > 0) {
        getChildrenNodeKey(item, type, dataKey)
      } else {
        if (type) {
         roleIds.value.push(item?.id)
        } else {
          const i = roleIds.value.indexOf(item.id)
          if (i != -1) {
            roleIds.value.splice(i, 1)
          }
        }
      }
    })
  }
}

后面带补充