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

el-tree 组件是 Element Plus 中用于展示树形数据的组件，它具有多种常用属性和方法。以下是一些关键属性和方法的简介：

1. data：树形数据的属性，类型为TreeData。
2. props：设置节点属性映射，默认映射{ children: 'children', label: 'label' }。
3. node-key：每个节点唯一标识属性的名称，默认为'id'。
4. show-checkbox：节点是否可被选择，默认为false。
5. highlight-current：是否高亮当前选中节点，默认为false。
6. default-expanded-keys：默认展开节点的 key 的数组。
7. draggable：是否开启拖拽功能，默认为false。
8. allow-drop：检查是否允许拖拽放置，用于自定义拖拽规则。

以下是一个简单的例子，展示如何使用el-tree组件，并控制可拖动的层级：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :draggable="true"
    :allow-drop="allowDrop"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      treeData: [
        { id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1' }] },
        { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }] },
        { id: 3, label: '一级 3', children: [{ id: 6, label: '二级 3-1' }] }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    allowDrop(draggingNode, dropNode, type) {
      // 控制可拖动的层级
      if (dropNode.level === 0) {
        return type !== 'inner';
      } else {
        return true;
      }
    }
  }
};
</script>

在这个例子中，我们定义了一个树形数据treeData，并通过el-tree组件展示。我们启用了拖拽功能draggable，并通过allowDrop方法来控制可拖动的层级，例如禁止内部节点（inner）的拖动，只允许拖动叶子节点与根节点之间的位置。这样就可以实现对树节点层级控制的拖动规则。