【记录31】elementUI el-tree 虚线、右键、拖拽

在Element UI的el-tree组件中，要实现虚线、右键和拖拽功能，您需要分别设置节点样式、使用自定义内容和引入el-tree的相关插件。

1. 虚线：您可以通过CSS为树节点添加边框样式来实现虚线效果。
2. 右键：您可以通过@node-contextmenu事件来处理右键点击事件，并使用el-dropdown和el-dropdown-menu组件来实现右键菜单。
3. 拖拽：您需要引入el-tree的拖拽功能插件，如el-tree-draggable。

以下是实现虚线、右键和拖拽功能的代码示例：

<template>
  <el-tree
    :data="data"
    class="custom-tree"
    @node-contextmenu="handleContextMenu"
    draggable
    @node-drop="handleDrop"
  >
    <span slot-scope="{ node, data }" class="custom-tree-node">
      <span>{{ node.label }}</span>
    </span>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        右键菜单
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="add">添加</el-dropdown-item>
        <el-dropdown-item command="edit">编辑</el-dropdown-item>
        <el-dropdown-item command="delete">删除</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // 树形数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleContextMenu(event, data, node, element) {
      event.preventDefault();
      // 处理右键点击事件
    },
    handleCommand(command) {
      // 处理下拉菜单命令
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // 处理节点拖拽后的逻辑
    }
  }
};
</script>
 
<style>
.custom-tree-node {
  min-height: 24px;
  font-size: 14px;
}
 
.custom-tree .el-tree-node__content {
  border: 1px dashed #ccc; /* 虚线边框 */
  padding-left: 5px;
  position: relative;
}
 
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
</style>

在这个示例中，el-tree组件使用了draggable属性来启用拖拽功能，并且通过CSS为节点添加了虚线边框。同时，通过@node-contextmenu事件监听了右键点击，并使用了el-dropdown组件来实现右键菜单。

请确保您已经安装了Element UI，并正确引入所需的组件和样式。以上代码仅为示例，您需要根据实际的数据结构和业务逻辑进行调整。