使用el-tree完成页面新增,修改,删除,拖拽,查询 功能 前端使用vue 后台使用java实现

el-tree 是一个基于 Element UI 的树形组件，提供了一些基本的树形操作，如拖拽、勾选等。要使用 el-tree 完成页面的新增、修改、删除、拖拽和查询功能，需要在 Vue 中引入 Element UI，并编写相应的方法来实现这些功能。

下面是一个示例代码，演示如何使用 el-tree 实现常见的树形操作：

<template>
  <div>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.name }}</span>
        <span>
          <el-button type="text" size="mini" @click.stop="handleAdd(data)">新增</el-button>
          <el-button type="text" size="mini" @click.stop="handleEdit(data)">修改</el-button>
          <el-button type="text" size="mini" @click.stop="handleDelete(data)">删除</el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      data: [
        {
          id: 1,
          name: '节点1',
          children: [
            { id: 2, name: '子节点1' },
            { id: 3, name: '子节点2' },
          ],
        },
        {
          id: 4,
          name: '节点2',
          children: [{ id: 5, name: '子节点3' }],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
    }
  },
  methods: {
    ...mapActions(['addNode', 'editNode', 'deleteNode']),
    handleNodeClick(data, node) {
      console.log(data, node)
    },
    handleAdd(data) {
      this.addNode({ parentId: data.id })
    },
    handleEdit(data) {
      this.editNode({ id: data.id })
    },
    handleDelete(data) {
      this.deleteNode({ id: data.id })
    },
  },
}
</script>

在这个示例中，我们使用了 Vuex 来管理树形数据的状态，通过 `mapActions` 将 `addNode`、`editNode` 和 `deleteNode` 映射到组件的 `methods` 中，然后在 `handleAdd`、`handleEdit` 和 `handleDelete` 方法中调用这些方法来实现新增、修改和删除操作。

同时，我们也实现了拖拽功能和查询功能，但这些功能的具体实现方式会根据具体的需求而有所不同。