ElementUI-tree拖拽功能与节点自定义

在ElementUI中，Tree组件默认支持拖拽功能，您可以通过设置draggable属性来启用拖拽。同时，您可以使用render-content来自定义节点的渲染。

以下是一个简单的例子，展示如何在ElementUI的Tree组件中使用拖拽功能和自定义节点：

<template>
  <el-tree
    :data="data"
    class="filter-tree"
    node-key="id"
    highlight-current
    :props="defaultProps"
    :draggable="true"
    @node-drop="handleDrop"
    render-content="renderContent"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // 您的树形数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // 拖拽后的处理逻辑
    },
    renderContent(h, { node, data, store }) {
      // 自定义渲染节点内容
      return (
        <span>
          <span>{node.label}</span>
          <!-- 其他自定义内容 -->
        </span>
      );
    }
  }
};
</script>

在这个例子中，draggable属性设置为true启用拖拽功能。handleDrop方法用于处理拖拽后的逻辑，比如更新数据的顺序。renderContent方法用于自定义节点的渲染，您可以在这里添加更多的Vue组件或HTML元素。