vue-template

Project setup

npm install ph-tree

usage

<div>单选模式</div>
<ph-tree
    flex="0 0 300px"
    :nodes="tree1"
    :checkable="false"
    @select="onSelect1"
    :structured="false"
></ph-tree>
<div>多选模式 checkable:true</div>
<ph-tree
    flex="0 0 300px"
    :nodes="tree2"
    :checkable="true"
    @select="onSelect2"
></ph-tree>
<div>单选模式:return-pid="true"</div>
<ph-tree
    flex="0 0 300px"
    :nodes="tree2"
    :checkable="false"
    :return-pid="true"
    @select="onSelect2"
></ph-tree>

script

<script lang="ts" setup>
import { reactive, toRefs } from 'vue';
import PhTree from '@/components'
const data = reactive<Record<string, unknown>>({
      result1: [],
      result2: [],
      values: ["1-1", "1-2-1"],
      tree1: [
        {
          id: 1,
          name: "海淀区",
        },
        {
          pid: 1,
          id: "1-1",
          name: "知春路",
        },
        {
          pid: 1,
          id: "1-2",
          name: "知春里",
        },
        {
          pid: 1,
          id: "1-3",
          name: "上地",
        },
        {
          pid: "1-2",
          id: "1-2-1",
          name: "厕所",
        },
      ],
      tree2: [
        {
          id: 0,
          name: "北京市",
          children: [
            {
              pid: 0,
              id: 1,
              name: "海淀区",
              children: [
                {
                  pid: 1,
                  id: "1-1",
                  name: "知春路",
                },
                {
                  pid: 1,
                  id: "1-2",
                  name: "知春里",
                },
                {
                  pid: 1,
                  id: "1-3",
                  name: "上地",
                },
              ],
            },
            {
              pid: 0,
              id: 2,
              name: "朝阳区",
              children: [
                {
                  pid: 2,
                  id: "2-1",
                  name: "望京",
                },
                {
                  pid: 2,
                  id: "2-2",
                  name: "望京西",
                },
              ],
            },
          ],
        },
        {
          id: 9,
          name: "天津市",
          children: [
            {
              pid: 9,
              id: "9-1",
              name: "望京",
            },
            {
              pid: 9,
              id: "9-2",
              name: "望京西",
            },
          ],
        },
      ],
    });
    const {result1,result2,values,tree1,tree2} = toRefs(data)
    const onSelect1 = (ids: Array<string | number>) => {
      data.result1 = ids;
    };
    const onSelect2 = (ids: Array<string | number>) => {
      data.result2 = ids;
    };
</script>

在线案例

See 在线案例.