elementUI里树形控件自定义节点

关忆北_

已于 2023-10-09 09:47:35 修改

阅读量392

点赞数

分类专栏： elementUI 文章标签： elementui javascript ecmascript

于 2023-06-06 16:10:50 首次发布

本文链接：https://blog.csdn.net/notagoodwriter/article/details/131069987

版权

elementUI 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先 el-tree 他原本的这个节点还是很好用的点击 Append 新增节点点击 Delete 删除节点

比如我想做成上图这样代码如下

<el-tree class="filter-tree" :data="treeData" :props="defaultProps" show-checkbox @check="handleCheckChange" :filter-node-method="filterNode" ref="tree">
   <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span v-if="data.isWordCard">
      <i class="el-icon-s-opportunity" :class="data.isOnLine ? 'green' : ''"></i>
      </span>
   </span>
</el-tree>

来一个插槽即可后方的则是 icon 图标 element 会自动给你排版