uni-app无限级树形组件简单实现

因为项目一些数据需要树形展示,但是官网组件没有。现在简单封装一个组件在app中使用,可以无线嵌套,展开,收缩,获取子节点数据等。

简单效果

组件TreeData

html 复制代码
<template>
  <view class="tree">
    <template v-for="(node, index) in treeData">
      <view>
        <span @click="toggleNode($event, node)">
          <uni-icons
            v-if="node.children && node.children.length > 0"
            :type="node.expanded ? 'arrowdown' : 'arrowright'"
            size="14"
          ></uni-icons>
          {{ node.label }}
        </span>
        <span
          @click.stop="deleteNode($event, node)"
          class="action-button delete-button"
          >删除</span
        >
        <span
          @click.stop="editNode($event, node)"
          class="action-button edit-button"
          >编辑</span
        >
        <view v-if="node.expanded" class="children">
          <Tree
            :treeData="node.children"
            @edit-node="(childNode) => $emit('edit-node', childNode)"
            @delete-node="(childNode) => $emit('delete-node', childNode)"
          />
        </view>
      </view>
    </template>
  </view>
</template>
  
<script>
export default {
  name: "Tree",
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
    expandAll: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      init: false,
    };
  },
  watch: {
    treeData: {
      immediate: true,
      handler(newData) {
        if (!this.init) {
          this.initializeTreeData(newData, this.expandAll);
          this.init = true;
        }
      },
    },
  },
  methods: {
    initializeTreeData(nodes, expanded) {
      nodes.forEach((node) => {
        this.$set(node, "expanded", expanded); // 使用 $set 确保响应式
        if (node.children && node.children.length > 0) {
          this.initializeTreeData(node.children, expanded); // 递归处理子节点
        }
      });
    },
    toggleNode(event, node) {
      event.stopPropagation(); // 阻止事件冒泡
      node.expanded = !node.expanded; // 切换节点展开状态
    },
    editNode(event, node) {
      event.stopPropagation();
      this.$emit("edit-node", node); // 触发父组件的 edit-node 事件,并传递当前节点
    },
    deleteNode(event, node) {
      event.stopPropagation();
      this.$emit("delete-node", node); // 触发父组件的 delete-node 事件,并传递当前节点
    },
  },
};
</script>
  
  <style scoped>
.tree {
  padding-left: 15px;
}
.children {
  padding-left: 15px;
}
.tree-node {
  display: flex;
  align-items: center;
}

.action-button {
  cursor: pointer;
  margin-left: 10px;
  color: #409eff;
}

.edit-button {
  float: right;
}

.delete-button {
  float: right;
}
</style>

在页面中使用...

html 复制代码
<template>
  <view class="page">
    <Tree
      :treeData="treeData"
      :expandAll="expandAll"
      @edit-node="handleEditNode"
      @delete-node="handleDeleteNode"
    />
  </view>
</template>

<script>
import Tree from "@/components/TreeData";

export default {
  components: {
    Tree,
  },
  data() {
    return {
      treeData: [
        {
          label: "根节点 1",
          children: [
            {
              label: "子节点 1-1",
              children: [
                {
                  label: "子节点 1-1-1",
                  children: [],
                },
                {
                  label: "子节点 1-1-2",
                  children: [],
                },
              ],
            },
            {
              label: "子节点 1-2",
              children: [],
            },
          ],
        },
        {
          label: "根节点 2",
          children: [
            {
              label: "子节点 2-1",
              children: [],
            },
          ],
        },
      ],
      expandAll: true, // 控制是否全部展开
    };
  },
  methods: {
    handleEditNode(node) {
      console.log("编辑节点", node);
      // 处理编辑节点的逻辑
    },
    handleDeleteNode(node) {
      console.log("删除节点", node);
      // 处理删除节点的逻辑
    },
  },
};
</script>

<style scoped>
page {
  background-color: #f5f6f8;
}

.page {
  padding: 20px;
}
</style>

凑活用

相关推荐
web_Hsir2 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir2 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa3 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
耶啵奶膘6 小时前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app
程序猿看视界20 小时前
Uni-app页面信息与元素影响解析
uni-app·状态栏·安全区域·窗口信息·像素比
清晨細雨21 小时前
UniApp集成极光推送详细教程
android·ios·uni-app·极光推送
_未知_开摆21 小时前
uniapp APP端在线升级(简版)
开发语言·前端·javascript·vue.js·uni-app
Li_na_na0121 小时前
解决安卓手机WebView无法直接预览PDF的问题(使用PDF.js方案)
android·pdf·uni-app·html5
web_Hsir1 天前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽1 天前
uniapp编译的app在ios上内存泄漏了
uni-app