hs-super-table

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

super-table接受一下入參

@Prop({ type: Object, default: () => ({}) }) private tableSchema!: TableColSchema; // 詳細見下,表格cols配置

@Prop({ type: [Object, Boolean], default: () => ({}) }) private searchSchema!: FormSchema | boolean; // 詳細見下,头部搜索搜索配置

@Prop({ type: Number }) private searchCols!: number // 默认头部搜索表单每项占1,设置一行有多少项搜索栏

@Prop({ type: Boolean, default: false }) private canSelect!: boolean; // 表格头部能否选中

@Prop({ type: [Object, Boolean], default: () => ({ pageSize: 20 }) }) private paginationSchema!: | { pageSize: number; } | false; // 分页

@Prop({ type: String, required: true }) private requestUrl!: string; // 表单搜索对应的url

@Prop({ type: Function }) private resultTransfer?: (result: any) => any[]; // 远程返回数据,有时不符合我们需要时需要transfer

@Prop({ type: Function }) private pageInfoTransfer?: any; // 远程返回数据中的分页信息,有时不符合我们需要时需要transfer

@Prop({ default: 'id' }) private rowKey!: any; // 指定每列数据中的key

@Prop({ type: Boolean, default: false }) private border!: boolean;

@Prop({ type: Boolean, default: true }) private autoLoad!: boolean;

@Prop({ type: Object, default: () => ({}) }) private params!: any; // 远程搜索时额外需要添加的参数

@Prop({ type: String, default: 'GET' }) private method!: string

@Prop({ default: () => () => { } }) private beforeQueryList!: (params: any) => boolean; // 远程搜索之前的回调

@Prop() private cacheKey!: string; // 有时需要缓存页面的头部搜索项,指定key即可

@Prop({ type: String, default: '' }) private title!: string;

TableColSchema

interface TableColSchema extends JsonSchema { enum?: Array<string | boolean | number | { label?: any; value?: any }>; properties?: { [property: string]: TableColSchema }; tableColProps?: { align?: string; position?: number; colSpan?: number; customRender?: (value: any, record?: any, index?: number) => any; slotName?: string; width?: number | string; fixed?: 'left' | 'right'; sortable?: boolean; }; }

FormSchema可配置表单的具体配置,super-form

interface FormSchema extends JsonSchema { title?: string; type?: string | string[]; enum?: <{ label?: any; value?: any }>[]; description?: string; default?: any; required?: string[]; properties?: { [property: string]: JsonSchema }; /**

• 枚举值数据源
• @type {{

• url: string;

• method?: string;

• params?: {

•   [propery: string]: any;

• };

• callback: Function;

• }}
• @memberof FormSchema / enumSource?: { /*
  • 请求URL
  • @type {string} / url: string; /*
  • 请求方式
  • @type {string} / method?: string; /*
  • 入参
  • @type {{

  •   [propery: string]: any;

  • }}

  / params?: { [propery: string]: any; }; /*
  • 回调函数
  • @type {Function} / callback: (data: any) => any[]; }; /*
• 是否可用
• @type {boolean}
• @memberof FormSchema / disabled?: boolean; /*
• 是否隐藏
• @type {boolean}
• @memberof FormSchema / visible?: boolean; /*
• 数值转换（取出）
• @type {Function}
• @memberof FormSchema / valueGetter?: (value: any) => any; /*
• 数值转换（赋值)
• @type {Function}
• @memberof FormSchema / valueSetter?: (value: any) => any; /*
• 属性
• @type {{ [property: string]: FormSchema }}
• @memberof FormSchema / properties?: { [property: string]: FormSchema }; /*
• 约束
• @memberof FormSchema / restrictions?: Array; /*
• 插槽名称
• @type {string}
• @memberof FormSchema / slotName?: string; /*
• 额外校验规则
• @type {string}
• @memberof FormSchema */ rules?: any[]; }

约束Restriction

interface Restriction { sources: Array<{ key: string, values: Array }>, target: { key: string, value?: any, enabled?: boolean, visible?: boolean, required?: boolean } } 表单中sources满足条件时,控制target的状态 { sources: [{ xxx: 1 xxx2: true }], taget: { key: formitemxxx, visible: false } }