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

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与事件绑定

<div
    class="as-program-opt"
    v-if="item.children && item.children.length"
>
    <el-icon
    v-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;