element-ui默认设置tree根节点展开并为选中状态

最新推荐文章于 2023-11-07 17:02:49 发布

原创最新推荐文章于 2023-11-07 17:02:49 发布 · 4.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

html代码：

主要用到三个组件中的属性：

1：:highlight-current=“true” 设置选中颜色的
2：:default-expanded-keys=“idArr” 设置默认展开的
3：:default-checked-keys=“idArr” 设置选中的

具体介绍可以去看官方文档
就看我上面说明的3个属性，其他多余的代码不用仔细看

 <el-tree :data="CatlogTreeData" node-key="id" ref="treeFather" :highlight-current="true" :default-expanded-keys="idArr" :default-checked-keys="idArr" :props="defaultProps" @node-click="handleNodeClick">
            <span :class="data.name=='分散采购目录'?'secondOne':''" slot-scope="{ node, data }">
              <i :class="data.icon" />
              <i v-if="data.type=='catalog'" />
              <i v-if="data.type=='menu'" class=" el-icon-tickets" />
              {{ node.label }}
            </span>
          </el-tree>

2：data里面声明我们要选中的根节点变量
idArr: [],

3：在获取树结构的时候把当前的根节点push到idArr变量中（methods代码）
这个着重看一下我代码后面标示的注释即可

    async getTreeData() {
      await systemApi.getCategoryTree().then(res => {
        this.CatlogTreeData = res.data.treenodelist;
        console.log('树结构的数据', this.CatlogTreeData);
        if (!this.clickData.id) {
          // console.log(this.$refs.treeFather.store.nodeMap[this.CatlogTreeData[0].id]);
          this.clickData.id = this.CatlogTreeData[0].id;  //此处就为我们的根节点id
          this.idArr.push(this.clickData.id);  把根节点id  push进去
          this.initList();  //请求初始化列表数据  注意：此处要放在设置颜色之前请求
          this.$nextTick(() => {
            this.$refs.treeFather.setCurrentKey(this.clickData.id); // 数据请求成功后，设置默认current  
          });
        }
      }).catch(err => {
        if (err) {
          this.$message.error(err.msg);
          return false;
        }
      });
    },

解决 element-ui的tree结构功能还是挺全的，以上为自己更改需求的时候记录之后多记录下笔记尽量简单些希望能帮助到遇到问题的程序媛们

标签