vue2 element select tree

您好！对于Vue2和Element UI的选择树（Select Tree）组件，您可以按照以下步骤进行实现：

1. 首先，确保您已经安装了Vue和Element UI。可以通过以下命令来安装它们：

npm install vue@2.6.14
npm install element-ui@2.15.1

2. 在您的Vue组件中，引入所需的组件和样式：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 在模板中使用`el-select`和`el-option`组件来创建选择树：

el-select v-model="selectedNode" filterable clearable placeholder="请选择">
  <el-option
    v-for="node in treeData"
    :key="node.id"
    :label="node.label"
    :value="node.id"
  >
    <template v-if="node.children">
      <el-option-group :label="node.label">
        <el-option
          v-for="childNode in node.children"
          :key="childNode.id"
          :label="childNode.label"
          :value="childNode.id"
        ></el-option>
      </el-option-group>
    </template>
  </el-option>
</el-select>

4. 在Vue组件的`data`选项中定义`treeData`和`selectedNode`变量，并在`created`钩子函数中获取树状数据：

export default {
  data() {
    return {
      treeData: [],
      selectedNode: null
    };
  },
  created() {
    // 从API或其他地方获取树状数据，然后赋值给treeData变量
    // 示例数据：
    this.treeData = [
      {
        id: 1,
        label: 'Node 1',
        children: [
          {
            id: 2,
            label: 'Node 1-1'
          },
          {
            id: 3,
            label: 'Node 1-2'
          }
        ]
      },
      {
        id: 4,
        label: 'Node 2'
      }
    ];
  }
};

5. 在`selectedNode`变量中，您将获得用户所选节点的值。您可以在组件中进一步处理该值或将其发送到后端进行处理。

这就是使用Vue2和Element UI创建选择树（Select Tree）组件的基本步骤。您可以根据自己的需求进行进一步的样式和功能定制。希望对您有所帮助！如有更多问题，请随时提问。