vue中使用el-tree组件,判断是节点还是叶子,添加图片_el-tree slot-scope

感谢我的同学来自小米的前端工程师-----冯昕

这个需求的要求是这样的,有一个树形结构的数据,我们需要在叶子前方添加一张图片,如果是节点,那么就没有这个图片,

现在的样子是这样的

现在我们需要将部门前面的图片去掉,只有设备才有这个图片

具体代码如下,el-tree组件有个插槽, slot-scope,插槽中可以自定义树节点的内容，参数为 { node, data },data就是当前节点的所有数据信息,是个对象{},接下来我们就可以通过部门和设备的不同点来控制前方图片的显示和隐藏,用了这个tree组件还是非常方便的,如果是自己封装的tree还需要用到递归

    <el-tree
                class="elTree"
                :data="data"
                :filter-node-method="filterNode"
                node-key="id"
                ref="tree"
                @node-click="handleNodeClick"
                :expand-on-click-node="false"
                :default-expand-all="false"
                accordion
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  //图片显示,判断是设备还是部门
                  <img
                    src="../../../assets/images/dianLog2.png"
                    alt=""
                    v-if="!data.children && !data.canClick"
                  />
                  <span>{{ data.label }}</span>
                  <span>
                    <el-button
                      style="margin-left: 2px; width: 19px; padding: 0px"
                      circle
                      type="text"
                      size="medium"
                      :disabled="false"
                      @click="() => edit(data)"
                      ><img src="../../../assets/images/修改.png" alt="" />
                    </el-button>
                    <el-button
                      style="margin-left: 2px; width: 19px; padding: 0px"
                      circle
                      type="text"
                      size="medium"
                      :disabled="false"
                      @click="() => append(data)"
                      ><img src="../../../assets/images/添加 (1).png" alt="" />
                    </el-button>
                    <el-button
                      type="text"
                      circle
                      size="mini"
                      style="padding: 1px; width: 1px; margin-left: 2px"
                      @click="() => remove(node, data)"
                    >
                      <img src="../../../assets/images/删除2.png" alt="" />
                    </el-button>
                  </span>
                </span>
              </el-tree>

完成以后,实现效果如下