036多级节点实现层叠展开与收缩的功能

树状节点收缩样式管理

const isCurrent = computed(() => {return (item: any) => {let styles: string;if (item.showChildren && item.children && item.children.length) {styles = 'as-program-mys';} else {styles = 'as-program-my';}if (item.id === programCurrent.item.id) {programCurrent.item = item; // 缓存回显继续保持当前节点选中状态styles += ' as-program-my-cur';} else if (programCurrent.item?.parents &&programCurrent.item.parents.length &&programCurrent.item.parents.includes(item.id)) {styles += ' as-program-my-par';} else if (item.parents &&item.parents.length &&item.parents.includes(programCurrent.item.id)) {styles += ' as-program-my-chi';}return styles;};
});

新增展开和收缩按钮Dom与事件绑定

<divclass="as-program-opt"v-if="item.children && item.children.length"
><el-iconv-if="item.showChildren"@click="item.showChildren = !item.showChildren"><Minus /></el-icon><el-icon v-else @click="item.showChildren = !item.showChildren"><Plus /></el-icon>
</div>

当drop到收缩的节点时自动展开

item.showChildren = true;

036多级节点实现层叠展开与收缩的功能相关推荐

echarts树状图点击展开子节点_Echarts树形图展开和收缩
一.实现效果收缩效果: 展开效果: 二.实现代码展开/收缩切换 ; var dom = document.getElementById("container"); var m ...
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
demo地址: https://github.com/XieTongXue/how-to/tree/master/vertical-toggle 需求分析: 如图,有很多高度不固定的模块(图中只显示两 ...
html仿qq最小化怎么实现,JS仿QQ好友列表展开、收缩功能(第一篇)
JS仿QQ好友列表展开.收缩功能(第一篇) 发布时间:2020-10-17 14:20:03 来源:脚本之家阅读:96 作者:erdouzhang 效果图如下所示: html: 我的好友张三李四 ...
vue伸缩效果_Vue.js - 元素展开、收起动画效果组件（附：二级菜单的展开、收缩动画效果）...
子菜单的展开.收缩功能在许多系统上都很常见,如果想要在打开收起时带有动画效果,过去常常会通过 jQuery 实现.而在 Vue 项目中,我们可以单独封装一个动画组件,方便使用. 1,效果图点击一级菜 ...
php 列表收缩展示插件,可展开和收缩的jquery FAQ问答列表特效
这是一款简单的jquery FAQ问答列表特效.该FAQ问答列表可以通过点击问题的标题来展开或收缩列表,它使用简单,方便实用. 使用方法在页面中引入jquery. HTML结构该FAQ问答列表采用 ...
android 卡片收缩展开,jQuery和CSS3炫酷堆叠卡片展开和收缩特效
插件描述:这是一款效果超酷的jQuery和CSS3堆叠卡片展开和收缩特效.该图片特效开始的时候卡片被堆叠在一起,当用户点击最上面的卡片的时候,堆叠图片以各种动画方式展开.展开后再点击任意卡片,它们又会 ...
html中treegrid不显示根节点,treegrid如何让子节点默认不展开
treegrid怎么让子节点默认不展开需求:内容都是动态生成的.点击父节点后才会展开子节点. 上图 treegrid代码 treeGrid = $('#treeGrid').treegrid({ u ...
css 文本、文字展开与收缩，查看更多收起
<view class='containers'><text class="content {{ellipsis?'ellipsis':'unellipsis'}}&quo ...
Android 收缩控件，展开，收缩
今天项目需要实现一个点击展开收缩的功能,网上搜索找了个适合自己的,稍微修改了下适合项目本身需求的. 只是做记录,需要的可以参考. 不废话直接上代码. 首先main布局: <?xml versio ...
qq列表展开多个html代码,JS仿QQ好友列表展开、收缩功能(第二篇)
在上篇的基础上继续完善,点击一个li元素,其他li元素上的类名清除掉. 效果图如下所示: js: window.onload = function(){ var list = document.get ...

036多级节点实现层叠展开与收缩的功能

036多级节点实现层叠展开与收缩的功能

树状节点收缩样式管理

新增展开和收缩按钮Dom与事件绑定

当drop到收缩的节点时自动展开

036多级节点实现层叠展开与收缩的功能相关推荐

最新文章

热门文章