用VUE实现树形下拉功能
时间: 2023-05-12 16:06:57 浏览: 71
可以使用 element-ui 中的 el-tree 组件来实现树形下拉功能,具体实现可以参考以下代码:
<template>
<el-tree
:data="data"
:props="defaultProps"
:expand-on-click-node="false"
:highlight-current="true"
:default-expanded-keys="[1]"
node-key="id"
@node-click="handleNodeClick"
></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 2,
label: '二级 1-1',
children: [
{
id: 3,
label: '三级 1-1-1'
},
{
id: 4,
label: '三级 1-1-2'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
}
};
</script>
阅读全文