请帮我用vue写一个可以默认展开同时又可以默认选中的组件el-tree
时间: 2023-05-20 16:05:50 浏览: 128
vue el-tree 默认展开第一个节点的实现代码
好的,以下是用 Vue 写一个可以默认展开同时又可以默认选中的组件 el-tree 的代码:
```
<template>
<el-tree :data="data" :props="defaultProps" :default-expand-all="true" :default-checked-keys="[2]"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
}
</script>
```
这个组件使用了 Element UI 的 el-tree 组件,通过设置 default-expand-all 属性为 true,可以默认展开所有节点;通过设置 default-checked-keys 属性为 [2],可以默认选中 id 为 2 的节点。同时,还需要设置 defaultProps 属性,指定节点的 label 和 children 属性名。
阅读全文