@hjxz/pharos-organization-pc

安装

该组件依赖了ant-design-vue(V3.2.20) 和 pinyin.js。所以在使用之前，请确保你的项目里面有这两个依赖。

pnpm i ant-design-vue pinyin

pnpm i @hjxz/pharos-organization-pc

<template>
  <div>
    {{ checked }}
    <br>
    <PharosOrganizationPc :data-sources="dataSource"  v-model:checked="checked"/>
  </div>
</template>
<script setup lang="ts">
  import { PharosOrganizationPc, OrganizationItem } from "@hjxz/pharos-organization-pc"
  import {data} from "./mockData.json"
  import { onMounted, ref } from "vue";
  const checked = ref([])
  const dataSource = ref<OrganizationItem[]>([])
  onMounted(() => {
    setTimeout(() => {
      dataSource.value = data as unknown as OrganizationItem[]
    },3000)
  })
</script>

组件属性

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | headFlag | 用于判断是否是头部,及没有上级的组织架构 |string | 0 | | dataSources | 组织架构数据源 | OrganizationItem[] | [] | | v-model:checked | 选中的组织架构 | string[] | [] | | single | 是否单选 | boolean | false | | mode | 组织架构模式 | string | user / dept / default | | disabledList | 禁用 | Array | [] | | beforeOk | 点击OK 回调函数 | (list: OrganizationItem[]) => Promise(boolean) | | | beforeCancel | 点击Cancel 回调函数 | (list: OrganizationItem[]) => Promise(boolean) | |