uni-app無限級樹形組件簡單實現(xiàn)代碼

更新時間：2025年01月13日 11:02:50 作者：洗發(fā)水很好用

文章介紹了如何在uni-app中簡單封裝一個無限級樹形組件,該組件可以無線嵌套,展開和收縮,并獲取子節(jié)點數據,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧

因為項目一些數據需要樹形展示，但是官網組件沒有?，F(xiàn)在簡單封裝一個組件在app中使用，可以無線嵌套，展開，收縮，獲取子節(jié)點數據等。

簡單效果

組件TreeData

<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); // 遞歸處理子節(jié)點
        }
      });
    },
    toggleNode(event, node) {
      event.stopPropagation(); // 阻止事件冒泡
      node.expanded = !node.expanded; // 切換節(jié)點展開狀態(tài)
    },
    editNode(event, node) {
      event.stopPropagation();
      this.$emit("edit-node", node); // 觸發(fā)父組件的 edit-node 事件，并傳遞當前節(jié)點
    },
    deleteNode(event, node) {
      event.stopPropagation();
      this.$emit("delete-node", node); // 觸發(fā)父組件的 delete-node 事件，并傳遞當前節(jié)點
    },
  },
};
</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>

在頁面中使用...

<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: "根節(jié)點 1",
          children: [
            {
              label: "子節(jié)點 1-1",
              children: [
                {
                  label: "子節(jié)點 1-1-1",
                  children: [],
                },
                {
                  label: "子節(jié)點 1-1-2",
                  children: [],
                },
              ],
            },
            {
              label: "子節(jié)點 1-2",
              children: [],
            },
          ],
        },
        {
          label: "根節(jié)點 2",
          children: [
            {
              label: "子節(jié)點 2-1",
              children: [],
            },
          ],
        },
      ],
      expandAll: true, // 控制是否全部展開
    };
  },
  methods: {
    handleEditNode(node) {
      console.log("編輯節(jié)點", node);
      // 處理編輯節(jié)點的邏輯
    },
    handleDeleteNode(node) {
      console.log("刪除節(jié)點", node);
      // 處理刪除節(jié)點的邏輯
    },
  },
};
</script>
<style scoped>
page {
  background-color: #f5f6f8;
}
.page {
  padding: 20px;
}
</style>

到此這篇關于uni-app無限級樹形組件簡單實現(xiàn)的文章就介紹到這了,更多相關uni-app無限級樹形組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: