element UI中在 el-select 与 el-tree 结合组件实现过程

如果想要在Element UI中通过一个下拉菜单选择树节点，在代码中的实现过程中，我们需要将el-tree组件的节点数据绑定在el-select组件中。下面是实现过程的详细攻略：

1. 被选择节点的数据获取

我们先给el-tree添加ref属性，这样我们在javascript中可以通过$refs属性访问到el-tree组件的实例对象，进而获取到我们选择的节点的数据对象

<el-tree ref="myTree" :data="treeData"></el-tree>

在js中，在data()中定义一个selectedNodeData属性，当用户选择el-tree中的一个节点时，我们将selectedNodeData赋值为此节点的数据

data() {
    return {
        treeData: [
            { // 树节点数据 },
            { // 树节点数据 },
            { // 树节点数据 }
        ],
        selectedNodeData: null // 被选择节点的数据
    }
},
methods: {
    handleNodeClick(data, node, event) {
        this.selectedNodeData = data
    }
}

2. el-select与el-tree结合组件实现

接下来我们将el-select与el-tree结合起来，实现通过下拉菜单选择树节点的功能。我们可以在el-select中设置一个下拉列表，列表展示el-tree中的节点数据。我们还需要监听用户在下拉列表中的选择，并将其选中的节点数据绑定到selectedNodeData上，以便我们在后续操作中进行使用。

实现的代码如下所示：

<el-select v-model="selectedNodeData" placeholder="请选择节点">
    <el-option v-for="node in treeData" :key="node.id" :label="node.label" :value="node"></el-option>
</el-select>
<el-tree ref="myTree" :data="treeData" @node-click="handleNodeClick"></el-tree>

data() {
    return {
        treeData: [
            {id: 1, label: "节点一", children: []},
            {id: 2, label: "节点二", children: []},
            {id: 3, label: "节点三", children: []}
        ],
        selectedNodeData: null
    }
},
methods: {
    handleNodeClick(data, node, event) {
        this.selectedNodeData = data;
    }
}

以上是关于在element UI中，通过el-select与el-tree结合实现选择树节点的完整攻略。下面是两条相关示例说明：

示例1

下拉菜单中选择树节点，同时在页面上以节点标签展示所选节点数据

<el-row :gutter="10">
    <el-col :span="8">
        <el-select v-model="selectedNodeData" placeholder="请选择节点">
            <el-option v-for="node in treeData" :key="node.id" :label="node.label" :value="node"></el-option>
        </el-select>
    </el-col>
    <el-col :span="8" v-if="selectedNodeData">
        <el-tag :closable="true" @close="selectedNodeData = null">{{ selectedNodeData.label }}</el-tag>
    </el-col>
</el-row>
<el-tree ref="myTree" :data="treeData" @node-click="handleNodeClick"></el-tree>

data() {
    return {
        treeData: [
            {id: 1, label: "节点一", children: []},
            {id: 2, label: "节点二", children: []},
            {id: 3, label: "节点三", children: []}
        ],
        selectedNodeData: null // 被选中节点的数据
    }
},
methods: {
    handleNodeClick(data, node, event) {
        this.selectedNodeData = data;
    }
}

示例2

下拉菜单中选择树节点，同时在页面上以表格的形式展示所选节点的子节点数据

<el-row :gutter="10">
    <el-col :span="8">
        <el-select v-model="selectedNodeData" placeholder="请选择节点">
            <el-option v-for="node in treeData" :key="node.id" :label="node.label" :value="node"></el-option>
        </el-select>
    </el-col>
</el-row>
<el-table :data="selectedNodeData.children">
    <el-table-column label="ID" prop="id"></el-table-column>
    <el-table-column label="Label" prop="label"></el-table-column>
</el-table>
<el-tree ref="myTree" :data="treeData" @node-click="handleNodeClick"></el-tree>

data() {
    return {
        treeData: [
            {id: 1, label: "节点一", children: [{id: 11, label: "节点一-1"}, {id: 12, label: "节点一-2"}, {id: 13, label: "节点一-3"}]},
            {id: 2, label: "节点二", children: []},
            {id: 3, label: "节点三", children: []}
        ],
        selectedNodeData: null // 被选中节点的数据
    }
},
methods: {
    handleNodeClick(data, node, event) {
        this.selectedNodeData = data;
    }
}