elementui tree 默认展开第一节点

系统管理员 2022-11-06 05:51 686阅读 0赞

> 代码如下

1.data设置存放id数组

2.默认展开属性赋值存放的id

3.监听watch事件

<template>
      <div class="app-container">
        <el-container class="userContainerDisplay">
          <el-aside class="leftContainer">
            <el-tree
              :data="treeList"
              :props="defaultProps"
              node-key="id"
              @node-click="handleNodeClick"
              :default-expanded-keys="defaultShowNodes"
              :highlight-current="true"
              ref="interfaceTree"
              :expand-on-click-node="false"
              class="leftTreeStyle"
            ></el-tree>
          </el-aside>
        </el-container>
      </div>
    </template>
    
    <script>
    export default {
      name: "Industry",
      data() {
        return {
          treeList: [],
          defaultShowNodes: [], 
          defaultProps: {
            children: "children",
            label: "name",
          },   
        };
      },
      created() {
        this.getTreeData();
      },
      methods: {
        // 左侧树数据
        async getTreeData() {
          const { data } = await api.getTreeList(this.query);
          this.treeList = data;
          this.$nextTick(() => {
            this.$refs.interfaceTree.setCurrentKey(this.treeList[0].id);
          });
        },
    
        
      },
      // 默认认展开一级
      watch: {
        treeList: {
          handler() {
            this.treeList.forEach((item) => {
              this.defaultShowNodes.push(item.id);
            });
          },
          deep: true,
        },
      },
    };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，686人围观）

还没有评论，来说两句吧...

相关阅读

相关 Q：elementUI中tree组件动态展开

1，在组件中设置展开收缩开关 default-expand-all="isExpand" ![1147600-20190916091444156-1791022247.pn

男娘i/ 2023年10月10日 09:41/ 0 赞/ 30 阅读

相关 Flex的Tree全部展开收缩，ji展开选中单个节点

//全部展开 private function ExpandAll():void \{ // treeMenu.dataProvider是id为treeMenu所

迈不过友情╰/ 2023年08月17日 15:51/ 0 赞/ 115 阅读

相关 elementui tree 默认展开第一节点

> 代码如下 1.data设置存放id数组 2.默认展开属性赋值存放的id 3.监听watch事件 <template> <div class=

系统管理员/ 2022年11月06日 05:51/ 0 赞/ 687 阅读

相关 antd-vue tree组件，默认展开所有节点（defaultExpandAll）

效果图： ![在这里插入图片描述][20210304161940448.png] 实现方法： html: <a-tree v-if

不念不忘少年蓝@/ 2022年11月05日 07:28/ 0 赞/ 1061 阅读

相关 element Tree 树形控件default-expanded-keys设置默认展开节点

[【vue+elementUI】根据数据默认展开图层树指定节点，default-expanded-keys - dqy95 - 博客园][vue_elementUI_defau

Dear 丶/ 2022年09月15日 06:07/ 0 赞/ 864 阅读

相关 flex tree 默认展开

这里分两种情况，一种是数据源在MXML文件中，如： <mx:XML id="treeXML" format="e4x"> <root>

分手后的思念是犯贱/ 2022年07月12日 09:14/ 0 赞/ 182 阅读

相关 vue使用ElementUI时导航栏默认展开

vue使用ElementUI时导航栏默认展开本文主要参考： http://element.eleme.io/\/zh-CN/component/menu 在使

亦凉/ 2022年06月09日 23:37/ 0 赞/ 849 阅读

相关 JSTree 默认展开树节点默认展开

红色部分 $("\jstree\_demo")

我不是女神ヾ/ 2022年06月09日 04:45/ 0 赞/ 768 阅读

相关 ElementUI中el-tree节点的操作

其实tree的有些方法用起来是很方便的， this.$refs.tree.getCheckedKeys()；这个原生态的方法。官方文档上说的是，返回一个数组。有了这个方法，

旧城等待，/ 2022年05月19日 04:59/ 0 赞/ 255 阅读

相关 elementUI的el-tree节点过滤事件

最近用到了elementUI的节点过滤事件，效果如下，当输入关键字搜索的时候，它会将所有含有关键字的节点都显示出来。 ![这里写图片描述][70] ![这里写图片描述][

- 日理万妓/ 2022年05月17日 09:07/ 0 赞/ 529 阅读