elementUI里树形控件 自定义节点

首先 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 会自动给你排版