你可以使用`v-for`指令来批量创建`el-select`和`el-tree`,并将它们结合在一起形成下拉框。下面是一个示例代码:
```
<template>
<div>
<el-select v-model="selectedNode" placeholder="请选择" @change="handleNodeChange">
<el-option v-for="node in nodes" :key="node.id" :label="node.name" :value="node.id"></el-option>
</el-select>
<el-tree :data="treeData" :node-key="node => node.id" show-checkbox default-expand-all :default-checked-keys="defaultCheckedKeys" :check-strictly="checkStrictly"></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
selectedNode: null,
nodes: [
{ id: 1, name: '节点1' },
{ id: 2, name: '节点2' },
{ id: 3, name: '节点3' },
],
treeData: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
},
],
},
{
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1',
},
{
id: 6,
label: '二级 2-2',
},
],
},
],
defaultCheckedKeys: [4, 5],
checkStrictly: true,
}
},
methods: {
handleNodeChange(value) {
console.log(value)
},
},
}
</script>
```
在这个示例中,我们使用`v-for`指令来遍历`nodes`数组,创建`el-option`组件,将其作为`el-select`的子组件。同时,我们也创建了一个`el-tree`组件,用于显示树形结构。在`el-tree`中,我们设置了默认展开所有节点、设置了默认选中的节点、以及启用了严格模式。当用户选择`el-select`中的节点时,我们可以通过`@change`事件来获取其对应的值。