vue3中el-tree的使用及后端传参

在Vue 3中，使用el-tree组件通常指的是使用Element Plus UI库中的el-tree组件。以下是一个简单的例子，展示了如何使用el-tree组件以及如何向后端发送请求并传递参数。

1. 安装Element Plus:

npm install element-plus --save

2. 在Vue组件中使用el-tree组件:

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import { getTreeData } from './api/tree-api'; // 假设有一个API模块用于获取树形数据
 
const treeData = ref([]);
const defaultProps = {
  children: 'children',
  label: 'label'
};
 
onMounted(() => {
  fetchTreeData();
});
 
const fetchTreeData = async () => {
  try {
    const response = await getTreeData(); // 发送请求获取树形数据
    treeData.value = response.data;
  } catch (error) {
    console.error('Failed to fetch tree data:', error);
  }
};
 
// 处理节点点击事件
const handleNodeClick = (data, node, self) => {
  console.log(data, node, self);
};
</script>

3. 后端API发送请求并传参的例子（假设使用axios）:

// tree-api.js
import axios from 'axios';
 
export const getTreeData = async (params) => {
  const response = await axios.get('/api/tree-data', { params });
  return response.data;
};

在上述代码中，我们首先在<template>中定义了el-tree组件，并通过:data属性绑定了树的数据，通过:props属性定义了树节点的属性映射。在<script setup>标签中，我们定义了treeData和defaultProps来分别存储树形数据和节点属性映射，并在组件挂载时(onMounted)发送请求获取数据。

在后端API中，我们使用axios发送GET请求到服务器的/api/tree-data接口，并带上任何需要的参数。

请根据实际的后端API接口和参数要求进行相应的调整。