一、前言

最近在开发项目过程中使用到了框架AVUE，他是基于elementUI和VUE高度封装后的框架，其特点是省时、省力(避免大量的CV操作)，刚开始可能有些许的不习惯，使用了几天熟悉后就会感受到快乐了~下面我把使用属性分别用中文标示出来供大家查阅。

二、各参数意义

1.表格form

import { PopoverPlacement } from 'element-ui/types/popover';
import { AvueComponentSize, Obj } from '../global';

/**
 * 表单项事件参数，适用于click|blur|focus
 */
interface FormColumnEventParams {
  /** 表单项值 */
  value: any;
  /** 鼠标点击事件$event */
  event: MouseEvent;
  /** 表单项列配置 */
  column: AvueFormColumn;
}

/** 表单项基本配置属性 */
interface FormBaseColumn {
  /** 列类型, 默认: 'input' */
  type?: string;
  /** 列字段(唯一不重复) */
  prop: string;
  /** 深结构数据绑定取值 */
  bind?: string;
  /** 标题名称 */
  label: string;
  /** 标题名称宽度, 默认: 110 */
  labelWidth?: number;
  /** 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 labelWidth, 默认: 'right' */
  labelPosition?: 'left' | 'right' | 'top';
  /** 弹窗编辑文字提示 */
  tip?: string;
  /**
   * 辅助文字提示展示方向
   * @since 2.8.2
   */
  tipPlacement?: PopoverPlacement;
  /** 标题文字提示 */
  labelTip?: string;
  /**
   * 标题文字提示展示方向
   * @since 2.8.2
   */
  labelTipPlacement?: PopoverPlacement;
  /** placeholder */
  placeholder?: string;
  /** 只读, 默认: false */
  readonly?: boolean;
  /** 是否可以清空选项, 默认: false */
  clearable?: boolean;
  /** 禁止编辑, 默认: false */
  disabled?: boolean;
  /** 校验规则 */
  rules?: Obj[];
  /** 控件大小 */
  size?: AvueComponentSize;
  /** 是否可见, 默认: true */
  display?: boolean;
  /** 默认值 */
  value?: any;
  /**
   * 字段位置排序
   * @description 不同版本中排序规则并不相同：`2.7.9 - 2.8.26`中，order值越小位置越靠前，其余版本值越大位置越靠前。自用版本自 `2.9.12` 改为值越小位置越靠前
   */
  order?: number;
  /** 数据类型转化时的分隔符，配合dataType使用, 默认: ', */
  separator?: string;
  /** 数据类型用于数组和字符串之间的转化 */
  dataType?: 'string' | 'number' | 'array';
  /**
   * 自定义样式
   * @since 2.7.1
   */
  className?: string;
}

/** 表单项列宽配置 */
interface FormColumnColOption {
  /** 栅列, 默认: 12 */
  span: number;
  /**
   * ≥768px 响应式栅格数或者栅格属性对象, 默认: 12
   * @since 2.8.12
   */
  smSpan: ResponsiveColumn;
  /**
   * <768px 响应式栅格数或者栅格属性对象, 默认: 24
   * @since 2.8.12
   */
  xsSpan: ResponsiveColumn;
  /**
   * 栅格左侧的间隔格数, 默认: 0
   * @since 2.8.12
   */
  offset: number;
  /** 表单项是否单独成行, 默认: false */
  row: boolean;
}

/** 表单项字典配置 */
interface FormColumnDicOption {
  /**
   * 字典
   *
   * 默认为{label, value}，其中label为显示，value为取值。可通过props属性调整
   */
  dicData: Obj[];
  /** 远程字典地址 */
  dicUrl: string;
  /** 字典请求方式，配合dicUrl使用 */
  dicMethod: 'get' | 'GET' | 'post' | 'POST';
  /** 字典请求参数，配合dicUrl使用 */
  dicQuery: Obj;
  /** 字典数据返回的执行函数，配合dicUrl使用 */
  dicFormatter: (value: any) => Obj[];
  /** 参数配置项 */
  props: Partial<{
    /** 名称属性值, 默认: 'label' */
    label: string;
    /** 值属性值, 默认: 'value' */
    value: string;
    /** 子属性值, 默认: 'children' */
    children: string;
    /** 返回的数据格式, 默认: '' */
    res: string;
  }>;
}

/** 表单项通用事件 */
interface FormColumnEvent {
  /**
   * 字段控制器, 不使用箭头函数
   * @example https://avuejs.com/form/form-control.html
   * @since 2.8.6
   */
  control: (value: any, form: Obj) => Record<string, Partial<AvueFormColumn>>;
  /** 点击事件, 不使用箭头函数 */
  click: (params: FormColumnEventParams) => void;
  /** 值改变事件, 不使用箭头函数 */
  change: (params: Omit<FormColumnEventParams, 'event'>) => void;
  /** 聚焦事件, 不使用箭头函数 */
  focus: (params: FormColumnEventParams) => void;
  /** 失焦事件, 不使用箭头函数 */
  blur: (params: FormColumnEventParams) => void;
}

/** 表单项通用参数 */
export interface AvueFormBaseColumn
  extends FormBaseColumn,
    Partial<FormColumnColOption>,
    Partial<FormColumnDicOption>,
    Partial<FormColumnEvent> {
  /** 底部操作栏栅列, 默认: 12 */
  menuSpan?: number;
  /**
   * 表单自定义, 默认: false
   * @deprecated 2.8.0
   */
  fromslot?: boolean;
  /**
   * 表单标题自定义, 默认: false
   * @deprecated 2.8.0
   */
  labelslot?: boolean;
  /**
   * 表单错误自定义, 默认: false
   * @deprecated 2.8.0
   */
  errorslot?: boolean;
  /**
   * 组件下拉自定义, 默认: false
   * @deprecated 2.8.0
   */
  typeslot?: boolean;
}

/**
 * 表单项配置
 * TODO 表单项个性化配置待完成
 */
export interface AvueFormColumn extends AvueFormBaseColumn {
  /** 其他配置 */
  [x: string]: any;
}

2.弹窗doalog

import { ElDialog } from 'element-ui/types/dialog';
import { FormOption } from '../form/option';

/** 表单弹窗 */
export declare class DialogForm {
  /** 构建弹窗 */
  initMounted: () => void;
  /**
   * 显示弹窗
   */
  show: (option: DialogFormOption) => void;
}

/** 表单弹窗配置项 */
export interface DialogFormOption extends ElDialog {
  /** 弹窗标题 */
  title: string;
  /** 表单配置 */
  option: FormOption;
  /** 表单提交后的回调 */
  callback?: (params: {
    /** 表单值 */
    data: Obj;
    /** 关闭弹窗 */
    close: () => void;
    /** 将表单置于普通状态 */
    done: () => void;
  }) => void;
}

3.属性option

import { AvueAlignment, AvueMenuType, AvueComponentSize, Obj } from '../global';
import { AvueCrudColumn } from './column';

/** 表格组件基础配置属性 */
interface CrudBaseOption {
  // ======== 表格基础配置 ========
  /** 视图类型 */
  boxType: 'add' | 'edit' | 'view';
  /** 是否详情模式, 默认: false */
  detail: boolean;
  /** 表格标题 */
  title: string;
  /** 表头标题所用的HTML标签, 默认: 'h2' */
  titleSize: string;
  /** 表头对齐方式, 默认: 'center' */
  headerAlign: AvueAlignment;
  /** 表格列齐方式, 默认: 'center' */
  align: AvueAlignment;
  /** 表格边框, 默认: false */
  border: boolean;
  /** 表格高度差（主要用于减去其他部分让表格高度自适应） */
  calcHeight?: number;
  /** 列显隐按钮, 默认: true */
  columnBtn: boolean;
  /** 列显隐按钮, 默认: 'el-icon-s-operation' */
  columnBtnIcon: string;
  /** 表格的排序字段 */
  defaultSort?: {
    /** 默认排序字段 */
    prop: string;
    /** 排序方式 */
    order: string;
  };
  /** 空数据时显示的文本内容，也可以通过slot="empty"设置, 默认: '暂无数据' */
  emptyText: string;
  /** 是列的宽度是否自撑开属性, 默认: true */
  fit: boolean;
  /** 表格高度 */
  height?: number | 'auto';
  /** 头部显隐, 默认: true */
  header: boolean;
  /** 是否显示表格序号（根据分页会自动计算，比如每页10行，到了第二页就会从11开始记数, 默认: false */
  index: boolean;
  /** 序号的标题, 默认: '#' */
  indexLabel: string;
  /** 序号的宽度, 默认: 50 */
  indexWidth: number;
  /** 序号是否冻结, 默认: 'left' */
  indexFixed: boolean | AvueAlignment;
  /** 行数据的 Key的主键，用于其他相关操作, 默认: 'id' */
  rowKey: string;
  /** 设置 indeterminate 状态，只负责样式控制 如果选择一半，不会出现半选, 默认: false */
  indeterminate: boolean;
  /** 表格最大高度 */
  maxHeight?: number;
  /** 字段排序, 默认: 0 */
  order?: number;
  /** 是否显示表格的表头, 默认: true */
  showHeader: boolean;
  /** 控件大小 */
  size: AvueComponentSize;
  /** 是否显示表格的斑马条纹, 默认: false */
  stripe: boolean;
  // ======== 表格分页配置 ========
  /**
   * 是否显示分页, 默认: true
   * @since 2.8.11
   */
  page: boolean;
  /**
   * 只有一页时是否隐藏分页, 默认: false
   * @since 2.4.1
   */
  simplePage: boolean;
  // ======== 表格合计配置 ========
  /** 是否在表尾显示合计行, 默认: false */
  showSummary: boolean;
  /** 表格合计需要配置的字段 */
  sumColumnList: Obj[];
  // ======== 表格行折叠配置 ========
  /** 是否展开折叠行, 默认: false */
  expand: boolean;
  /** 是否展开折叠行宽度, 默认: 60 */
  expandWidth: number;
  /** 是否展开折叠行冻结, 默认: 'left' */
  expandFixed: boolean | AvueAlignment;
  /** 是否默认展开所有行，"expand"为true的时候有效, 默认: false */
  defaultExpandAll: boolean;
  /** 可以通过该属性设置目前的展开行，需要设置 rowKey 属性才能使用，该属性为展开行的 keys 数组。 */
  expandRowKeys: any[];
  // ======== 表格行勾选配置 ========
  /** 行可勾选, 默认: false */
  selection: boolean;
  /** 行可勾选的宽度, 默认: 50 */
  selectionWidth: number;
  /** 行可勾选是否冻结, 默认: 'left' */
  selectionFixed: boolean | AvueAlignment;
  /** 行可勾选是否显示tip信息, 默认: true */
  tip: boolean;
  /**
   * 仅对 selection为true 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
   * @param row 所在行数据
   * @param index 行号
   */
  selectable: (row: Obj, index: number) => boolean;
  /** 仅对 selection为true 的列有效，为 true 则会在数据更新之后保留之前选中的数据（需指定 rowKey）, 默认: true */
  reserveSelection: boolean;
  /** 清空选中按钮（当selection为true起作用）, 默认: true */
  selectClearBtn: boolean;
  // ======== 表格树配置 ========
  /**
   * 是否为表格树，若无配置，判断数据项中是否包含children，若包含，则为true, 默认: false
   * @since 2.5.0
   */
  tree: boolean;
  /**
   * 是否开启懒加载，通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点, 默认: false
   * @since 2.3.0
   */
  lazy: boolean;
  /**
   * 行数据的 上级Key的主键，用于树其他相关操作, 默认: 'parentId'
   * @since 2.6.15
   */
  rowParentKey: string;
  // ======== 其他配置 ========
  /** 是否开启表格排序, 默认: false */
  sortable: boolean;
  /** 是否以tab形式展示group, 默认: false */
  tabs: boolean;
}

/** 表格组件菜单栏配置 */
interface CurdMenuOption {
  /** 是否显示操作菜单栏, 默认: true */
  menu: boolean;
  /** 操作菜单栏的宽度, 默认: 220 */
  menuWidth: number;
  /** 手机端时操作菜单栏的宽度, 默认: 100 */
  menuXsWidth: number;
  /**
   * 菜单栏标题对齐方式, 默认: 'center'
   * @since 2.6.0
   */
  menuHeaderAlign: AvueAlignment;
  /** 菜单栏对齐方式, 默认: 'center' */
  menuAlign: AvueAlignment;
  /** 操作栏菜单按钮类型, 默认: 'text' */
  menuType: AvueMenuType;
  /** 菜单下拉按钮的文字，仅在menuType为'menu'时生效, 默认: '功能' */
  menuBtnTitle: string;
  /** 操作列的文字, 默认: '操作' */
  menuTitle: string;
  /** 操作列是否冻结, 默认: 'right' */
  menuFixed: boolean | 'left' | 'right';
}

/** 表格操作按钮及对应功能配置 */
interface CrudActionOption {
  // ==== menuLeft ====
  /** 是否显示新增按钮, 默认: true */
  addBtn: boolean;
  /** 新增按钮, 默认: '新 增' */
  addBtnText: string;
  /** 自定义过滤按钮图标, 默认: 'el-icon-plus' */
  addBtnIcon: string;
  /** 新增窗口标题文案, 默认: '新 增' */
  addTitle: string;
  /**
   * 是否显示新增行按钮, 默认: false
   *
   * tip: 该按钮的功能为点击后在表格中新增一行
   * @since 2.6.9
   */
  addRowBtn: boolean;
  // ==== menuRight ====
  /** 是否显示保存按钮, 默认: true */
  saveBtn: boolean;
  /** 弹出框为新增时保存按钮标题, 默认: '新 增' */
  saveBtnText: string;
  /** 弹出框为新增时保存按钮图标, 默认: 'el-icon-circle-plus-outline' */
  saveBtnIcon: string;
  /** 是否显示日期组件按钮, 默认: false */
  dateBtn: boolean;
  /** 日期控件默认的值, 默认: false */
  dateDefault: boolean;
  /** 是否显示Excel打印按钮, 默认: false */
  excelBtn: boolean;
  /** Excel打印按钮文案, 默认: '导出' */
  excelBtnText: string;
  /** Excel打印按钮图标, 默认: 'el-icon-download' */
  excelBtnIcon: string;
  /** 是否显示自定义过滤按钮, 默认: false */
  filterBtn: boolean;
  /** 自定义过滤按钮图标, 默认: 'el-icon-tickets' */
  filterBtnIcon: string;
  /** 是否显示打印按钮, 默认: false */
  printBtn: boolean;
  /** 打印按钮文案, 默认: '打印' */
  printBtnText: string;
  /** 打印按钮图标, 默认: 'el-icon-printer' */
  printBtnIcon: string;
  /** 是否显示刷新按钮, 默认: true */
  refreshBtn: boolean;
  /** 自定义过滤按钮图标, 默认: 'el-icon-refresh' */
  refreshBtnIcon: string;
  /** 是否显示搜索显隐按钮, 默认: true */
  searchShowBtn: boolean;
  /** 搜索按钮图标, 默认: 'el-icon-search' */
  searchBtnIcon: string;
}

/** 表格行操作按钮及对应功能配置 */
interface CrudRowActionOption {
  // ======== 表格弹窗操作 ========
  // ==== 复制新增功能 ====
  /** 是否显示复制新增按钮, 默认: false */
  copyBtn: boolean;
  /** 复制新增按钮文案, 默认: '复 制' */
  copyBtnText: string;
  /** 复制新增按钮图标, 默认: 'el-icon-document-add' */
  copyBtnIcon: string;
  // ==== 编辑功能 ====
  /** 是否显示行内编辑按钮, 默认: true */
  editBtn: boolean;
  /** 编辑按钮文案, 默认: '编辑' */
  editBtnText: string;
  /** 编辑按钮图标, 默认: 'el-icon-edit' */
  editBtnIcon: string;
  /** 编辑窗口标题文案, 默认: '编 辑' */
  editTitle: string;
  /** 是否显示更新按钮, 默认: true */
  updateBtn: boolean;
  /** 弹出框为编辑时保存按钮标题, 默认: '修 改' */
  updateBtnText: string;
  /** 弹出框为编辑时保存按钮图标, 默认: 'el-icon-circle-check' */
  updateBtnIcon: string;
  // ==== 查看功能 ====
  /** 是否显示查看按钮, 默认: false */
  viewBtn: boolean;
  /** 查看按钮文案, 默认: '查看' */
  viewBtnText: string;
  /** 查看按钮图标, 默认: 'el-icon-view' */
  viewBtnIcon: string;
  /** 查看窗口标题文案, 默认: '查 看' */
  viewTitle: string;
  // ==== 删除功能 ====
  /** 是否显示删除按钮, 默认: true */
  delBtn: boolean;
  /** 删除按钮文案, 默认: '删 除' */
  delBtnText: string;
  /** 删除按钮图标, 默认: 'el-icon-delete' */
  delBtnIcon: string;
  // ======== 表格行内操作 ========
  /** 表格单元格可编辑（当column中有搜索的属性中有cell为true的属性启用，只对type为select和input有作用), 默认: false */
  cellBtn: boolean;
  /** 是否显示行编辑取消按钮, 默认: true */
  cancelBtn: boolean;
  /** 编辑取消按钮文案, 默认: '取 消' */
  cancelBtnText: string;
  /** 删除按钮图标, 默认: 'el-icon-circle-close' */
  cancelBtnIcon: string;
}

/** 表格组件弹窗配置 */
interface CrudDialogOption {
  // ======== 弹窗配置 ========
  /** 是否为全屏Dialog, 默认: false */
  dialogFullscreen: boolean;
  /** 是否可以通过按下ESC关闭Dialog, 默认: true */
  dialogEscape: boolean;
  /** 是否可以通过点击modal关闭Dialog, 默认: true */
  dialogClickModal: boolean;
  /** 是否显示关闭按钮, 默认: true */
  dialogCloseBtn: boolean;
  /** 是否需要遮罩层, 默认: true */
  dialogModal: boolean;
  /** 弹出表单的弹窗具体顶部的距离(px), 默认: '0' */
  dialogTop: string | number;
  /** 弹出表单的类型, 默认: dialog */
  dialogType: 'dialog' | 'drawer';
  /** 弹出表单的弹窗宽度, 默认: '60%' */
  dialogWidth: string;
  /**
   * 是否允许拖拽, 默认: true
   * @since 2.9.0
   */
  dialogDrag: boolean;
  // ======== 弹窗表单配置 ========
  /** 回车提交表单, 默认: false */
  enter: boolean;
  /** 弹出表单的label宽度, 默认: 90 */
  labelWidth: number;
  /**
   * 弹出表单按钮组的位置, 默认: 'right'
   * @deprecated 2.7.9
   */
  menuPosition: AvueAlignment;
  /**
   * 弹出表单按钮组的位置, 默认: 'right'
   * @since 2.7.9
   */
  dialogMenuPosition: AvueAlignment;
}

/** 表格组件_搜索组件配置 */
interface CrudSearchOption {
  /** 首次加载是否显示搜索, 默认: true */
  searchShow: boolean;
  /** 回车提交表单, 默认: true */
  searchEnter: boolean;
  /** 是否展示半收缩按钮, 默认: true */
  searchIcon: boolean;
  /** 展示半收缩按钮的个数, 默认: 2 */
  searchIndex: number;
  /** 搜索项的长度, 默认: 6 */
  searchSpan: number;
  /** 搜索项之间的间距, 默认: 20 */
  searchGutter: number;
  /** 搜索项label的宽度, 默认: 80 */
  searchLabelWidth: number;
  /** 搜索项label的定位, 默认: 'right' */
  searchLabelPosition: AvueAlignment;
  /** 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，对cascader|tree类型组件生效, 默认: false */
  searchCheckStrictly: boolean;
  /** 搜索按钮的长度, 默认: 6 */
  searchMenuSpan: number;
  /**
   * 搜索按钮的位置, 默认: 'center'
   * @since 2.7.9
   */
  searchMenuPosition: AvueAlignment;
  /**
   * 组件尺寸
   * @since 2.7.9
   */
  searchSize: AvueComponentSize;
  /** 搜索按钮文案, 默认: '搜索' */
  searchBtnText: string;
  /** 搜索按钮图标, 默认: 'el-icon-search' */
  searchBtnIcon: string;
  /** 是否显示搜索按钮, 默认: true */
  searchBtn: boolean;
  /** 是否显示清空按钮, 默认: true */
  emptyBtn: boolean;
  /** 清空按钮文案, 默认: '清空' */
  emptyBtnText: string;
  /** 清空按钮图标, 默认: 'el-icon-delete' */
  emptyBtnIcon: string;
}

/** 表格组件配置属性 */
export type CrudOption = Partial<CrudBaseOption> &
  Partial<CurdMenuOption> &
  Partial<CrudActionOption> &
  Partial<CrudRowActionOption> &
  Partial<CrudDialogOption> &
  Partial<CrudSearchOption> & {
    /** 分组配置 */
    group?: {
      /** 分组名称 */
      label: string;
      /** 弹出表单的label宽度, 默认: 90 */
      labelWidth?: number;
      /** 分组字段 */
      prop?: string;
      /** 分组图标 */
      icon?: string;
      /** 是否分组折叠, 默认: true */
      arrow?: boolean;
      /** 分组默认叠起, 默认: false */
      collapse?: boolean;
      /** 分组下的字段配置*/
      column: AvueCrudColumn[];
    }[];
    /** 表格列配置属性*/
    column?: AvueCrudColumn[];
  };

三、结语

以上是目前总结出会经常使用的重要属性，希望大家能顺利使用AVUE~