el-tree 初始化
时间: 2023-12-01 21:42:07 浏览: 159
vue el-tree 默认展开第一个节点的实现代码
el-tree的初始化需要以下步骤:
1. 引入el-tree组件和相关样式文件。
2. 在Vue实例中注册el-tree组件。
3. 准备树形数据。
4. 在el-tree标签中绑定数据和相关属性,例如node-key、ref、highlight-current、default-expand-all等。
5. 在Vue实例中定义相关方法,例如handleNodeClick等。
6. 在el-tree标签中绑定相关事件,例如@node-click等。
下面是一个el-tree的初始化示例:
```html
<template>
<div>
<el-tree :data="treeData" :props="defaultProps" node-key="id" ref="tree" highlight-current default-expand-all @node-click="handleNodeClick">
</el-tree>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
treeData: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1'
},
{
id: 10,
label: '三级 1-1-2'
}
]
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick(data) {
console.log(data)
}
}
}
</script>
<style>
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #409EFF;
color: #fff;
}
</style>
```
阅读全文