tribiani-vue-tools

tribiani-vue-tools

数据结构 OrgTree 说明

OrgTree 的数据结构如下：

export interface OrgTree<T = string | number> {
  label?: string;
  id?: T;
  type?: string;
  collapsed?: boolean;
  hasChild?: boolean;
  isEmpty?: boolean;
  pid?: string;
  children?: OrgTree<T>[];

}

注： 这里是这个组件定义的 OrgTree 这个数据类型，如果后端返回的数据结构和该数据结构有差别或者说关键的字段名称对不上，则可以通过在使用组件的时候传入 fieldNmaes 属性来实现数据结构的匹配。该参数的数据结构如下：

export interface OrgFieldNames {
  id?: string;
  label?: string;
  children?: string;
  type?: string;
  isEmptyItem?: string;
}

我们可以对存在于改数据结构的属性名进行自定义，比如后台定义的子节点字段不是 children 而是 nodes，那么我们可以传入如下参数：

<OrgLaneChart :fieldNames="{children:'nodes'}"></OrgLaneChart>

其他字段以此类推。

但是这样子我们在用 data.nodes这种方式去访问 OrgTree 的属性时不会有语法提示，因此我们需要重新声明这个 interface：

declare module "tribiani-vue-tools" {
  interface OrgTree {
    nodes: OrgTree[];
  }
}

同样的，如果后台又返回其他对前端有用的字段，都可以用同样的方式去声明。

props

插槽

这个组件有提供很多插槽，插槽说明如下：