jsh_erp_app/components/leo-tree/leo-tree.vue

<template>
  <view class="leo-tree">
    <treeNode
      v-for="item in data"
      :item="item"
      :key="item[defaultProps.id]"
      :defaultProps="defaultProps"
      :selectedNodeId="value"
      @node-click="handleNodeClick"
      @node-expand="handleNodeExpand"
      @node-collapse="handleNodeCollapse"
    ></treeNode>
  </view>
</template>
<script>
import treeNode from "./tree-node.vue";
export default {
  components: {
    treeNode,
  },
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    value: {
      type: [String, Number],
      default: null,
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          id: "id",
          children: "children",
          label: "label",
        };
      },
    },
  },
  mounted() {},
  methods: {
    handleNodeClick(node) {
      const nodeId = node[this.defaultProps.id];
      this.$emit("input", nodeId);
      this.$emit("node-click", node);
    },
    handleNodeExpand(node) {
      this.$emit("node-expand", node);
    },
    handleNodeCollapse(node) {
      this.$emit("node-collapse", node);
    },
  },
};
</script>
<style scoped></style>