Vue 3 的嵌套树视图组件 - vue3-tree

Vue 3 的嵌套树视图组件 - vue3-tree
插件名称 vue3-tree
发布时间 2021年8月26日
插件作者 teamseodo

基于 Vue 3 Composition API 的可检查、可搜索和嵌套的树视图组件。

安装和下载:

# Yarn
$ yarn add vue3-tree

# NPM
$ npm i vue3-tree --save

使用:

1.安装并注册树组件。

import { ref } from "vue";
import Tree from "vue3-tree";
export default {
  components: {
    Tree,
  },
  // ...
};

2. 将树组件和搜索字段一起添加到模板中。

<template>
  <input v-model="searchText" type="text" />
  <Tree
    :nodes="data"
    :search-text="searchText"
    @onNodeExpanded="onNodeExpanded"
    @onCheckboxToggle="onCheckboxToggle"
    @onDataUpdated="onDataUpdated"
    @onToggleParentCheckbox="onToggleParentCheckbox"
  />
</template>

3. 在你的应用中渲染一棵树。

export default {
  components: {
    Tree,
  },
  setup() {
    const data = ref([
      {
        id: "1",
        label: "a",
        nodes: [
          {
            id: "4",
            label: "aa",
          },
          {
            id: "5",
            label: "ab",
          },
        ],
      },
      {
        id: "2",
        label: "b",
        nodes: [
          {
            id: "6",
            label: "ba",
            nodes: [
              {
                id: "11",
                label: "aaaa",
                nodes: [
                  {
                    id: "15",
                    label: "aaaa",
                  },
                  {
                    id: "16",
                    label: "bbbb",
                  },
                ],
              },
              {
                id: "12",
                label: "bbbb",
              },
            ],
          },
          {
            id: "7",
            label: "bb",
            nodes: [
              {
                id: "13",
                label: "cccc",
              },
              {
                id: "14",
                label: "dddd",
              },
            ],
          },
        ],
      },
      {
        id: "3",
        label: "c",
      },
    ]);
    const searchText = ref("");
    const onNodeExpanded = (node, state) => {
      // console.log('state: ', state)
      // console.log('node: ', node)
    };
    const onCheckboxToggle = (node, state) => {
      // console.log('checkbox state: ', state)
      // console.log('checkbox node: ', node)
    };
    const onToggleParentCheckbox = (node, state) => {
      // console.log('parent checkbox state: ', state)
      // console.log('parent checkbox node: ', node)
    };
    return {
      data,
      searchText,
      onNodeExpanded,
      onCheckboxToggle,
      onToggleParentCheckbox,
    };
  },
};

4. 可用的组件道具。

nodes: {
  type: Array,
  required: true,
},
props: {
  type: Object,
  default() {
    return {
      nodes: 'nodes',
      label: 'label',
    }
  },
},
indentSize: {
  type: Number,
  default: 10,
},
gap: {
  type: Number,
  default: 10,
},
searchText: {
  type: String,
  default: '',
},
expandRowByDefault: {
  type: Boolean,
  default: false,
},
expandAllRowsOnSearch: {
  type: Boolean,
  default: true,
},

5. 可用的 treeRow 道具。

node: {
  type: Object,
  required: true,
},
depth: {
  type: Number,
  default: 0,
},
indentSize: {
  type: Number,
  required: true,
},
gap: {
  type: Number,
  required: true,
},
expandRowByDefault: {
  type: Boolean,
  default: false,
},