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

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

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

现在的样子是这样的

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

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

    <el-treeclass="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 }">//图片显示,判断是设备还是部门<imgsrc="../../../assets/images/dianLog2.png"alt=""v-if="!data.children && !data.canClick"/><span>{{ data.label }}</span><span><el-buttonstyle="margin-left: 2px; width: 19px; padding: 0px"circletype="text"size="medium":disabled="false"@click="() => edit(data)"><img src="../../../assets/images/修改.png" alt="" /></el-button><el-buttonstyle="margin-left: 2px; width: 19px; padding: 0px"circletype="text"size="medium":disabled="false"@click="() => append(data)"><img src="../../../assets/images/添加 (1).png" alt="" /></el-button><el-buttontype="text"circlesize="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>

完成以后,实现效果如下

vue中使用el-tree组件,判断是节点还是叶子,添加图片相关推荐

class根据状态 vue_搞懂并学会运用 Vue 中的无状态组件
啥是应用程序状态,为什么咱们需要它? 状态管理通常在较小的项目并不需要,但是当涉及到更大的范围时,如企业级的应用大部分需要它了.简单的说,状态是一个包含应用程序使用的最新值的对象.但是,如果咱们从结构 ...
[vue] vue中什么是递归组件？举个例子说明下？
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
vue中集成的ui组件库_Vue组件可使用Vault Flow通过Braintree集成PayPal付款
vue中集成的ui组件库 Vue Braintree PayPal按钮 (Vue Braintree PayPal button) Vue component to integrate PayPal ...
有关QJ_Filecenter在vue中的使用和组件封装
有关QJ_Filecenter在vue中的使用和组件封装 QJ_FileCenter在vue中的使用和组件封装安装第一步:在官网下载QJ_FileCenter安装包第二部:访问FileCente ...
vue中，右键菜单组件v-contextmenu的使用
vue中,右键菜单组件v-contextmenu的使用 1.效果右键菜单之禁用和子菜单 2.流程第一步:安包 npm install v-contextmenu --save-dev npm in ...
Vue编写的树形tree组件
近期在进行vue的学习,自研的vue项目需要一个tree组件.由于在学习阶段,不想'拿来主义',拿别人写好的组件使用,对于处于学习阶段的开发者来说不是一件好事,虽然拿别人开发好的东西过来用可以快速进行 ...
Vue中如何扩展⼀个组件
Vue中如何扩展⼀个组件按照逻辑扩展和内容扩展来列举: 逻辑扩展有:mixins.extends.composition api: 内容扩展有: slots: 一.Mixin 组件和组件之间有时候会 ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
vue中dom元素和组件的获取
Vue中获取DOM元素 <div id="app"><input type="button" value="获取元素" @ ...

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

vue中使用el-tree组件,判断是节点还是叶子,添加图片相关推荐

最新文章

热门文章