el-tree组件说明汇总，实现过滤筛选、添加、编辑、删除、选中节点功能等

指标满载

于 2020-07-08 09:29:40 发布

阅读量5.1k

点赞数 6

文章标签： el-tree 过滤筛选选中节点

本文链接：https://blog.csdn.net/weixin_44770377/article/details/107186316

版权

本文介绍了el-tree组件的使用，包括通过输入关键字过滤树节点、为树添加滚动条、调整编辑删除按钮样式以及设置选中特定节点的方法。特别提到在设置选中节点时，由于DOM渲染问题，需要利用$nextTick确保操作生效。

摘要由CSDN通过智能技术生成

使用el-aside和el-main布局，实现el-tree和el-form相结合的左树右表结构。表单参照Form 表单使用，下面主要说明el-tree的常见使用方法：在这里插入图片描述

<el-aside>
  <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
  <el-button type="primary" icon="el-icon-plus" size="small"  @click="addChanel" style="width:100%;margin:7px 0;">添加栏目</el-button>
  <el-scrollbar class="scrollbar">
     <el-tree
       ref="tree"
       :data="treeData"
       :props="defaultProps"
       node-key="id"
       :default-checked-keys="defaultChec