vueel-tree默认展开第一个节点的实现代码_vue树默认展开第一级结构,el-tree展开指定节点 - CSDN文库

1星 108 浏览量更新于2023-05-11 评论收藏 67KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue el-tree 默认展开第一个节点的实现代码默认展开第一个节点的实现代码

主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学

习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

vue 的树形控件 el-tree 可以用来方便地实现树形控件，但是官方文档中，关于控件的默认展开只有默认展开全部或者默认全部

关闭，如下所示：

对于指定节点的展开，需要指定其id，从而通过 default-expanded-keys 设置默认展开的节点。

对于后台返回的数据，默认展开其第一层的第一个，其实很简单：对于获取到的后台数据，将其第一层节点添加到数组中，将

default-expanded-keys 绑定数组，从而设置默认展开的节点。

实际应用：默认展开第一层节点中的第一个节点：

<template>

<section>

<el-row class="toolbar" style="width: 20%;height:600px" align="left">

<div class='treeClass'>

<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"

highlight-current node-key="id" :default-expanded-keys="treeExpandData">

</el-tree>

</div>

</el-row>

</section>

</template>

<script>

export default {

data() {

return {

treeData:[], //后台返回的tree树列表

treeExpandData:[], //自己定义的用于接收tree树id的数组

provincialCenterId:'',

defaultProps: {

children: 'item',

label: 'name',

},

}

},

created(){

this.getEquipmentList()

},

methods: {

// 获取树形结构默认展开节点

getRoleTreeRootNode(provincialCenterId) {

this.treeExpandData.push(provincialCenterId)

},

//获取tree树列表

getEquipmentList: function(params){

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论1

ddtramp

2021-11-16

useless code

weixin_38725450

粉丝: 1
资源: 913

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈