element plus 树形控件 axios post请求调接口用insertBefore方法增加节点

Element Plus 的树形控件支持使用 `insertBefore` 方法增加节点，这需要使用到树形控件的 API。同时，如果需要调用后端接口来获取数据，可以使用 axios 发送 POST 请求，获取数据后再通过 API 添加节点。

以下是一个示例代码，用于使用 axios 发送 POST 请求，获取数据并使用 `insertBefore` 方法添加节点到树形控件中：

<template>
  <el-tree :data="treeData" ref="tree" :expand-on-click-node="false">
    <template v-slot="{ node, data }">
      <span>{{ data.label }}</span>
      <el-button @click="addChild(node)">添加子节点</el-button>
    </template>
  </el-tree>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      treeData: [],
    };
  },
  methods: {
    addChild(node) {
      // 发送 POST 请求获取子节点数据
      axios.post('/api/getChildren', { parentId: node.id })
        .then(response => {
          // 将子节点添加到当前节点前面
          response.data.forEach(child => {
            this.$refs.tree.insertBefore({
              data: child,
              node: node,
            });
          });
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
  mounted() {
    // 初始化树形控件数据
    axios.get('/api/getTreeData')
      .then(response => {
        this.treeData = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

在上面的代码中，我们定义了一个 `addChild` 方法，用于添加子节点。当用户点击添加子节点按钮时，会发送 POST 请求到 `/api/getChildren` 接口，获取子节点数据。然后，我们将每个子节点使用 `insertBefore` 方法添加到当前节点前面。其中，`node` 表示当前节点的数据，`$refs.tree` 是树形控件的引用。

在 `mounted` 生命周期钩子函数中，我们使用 axios 发送 GET 请求，获取树形控件的初始化数据，并将其赋值给 `treeData`。然后，在模板中使用 `v-for` 指令渲染树形控件。