组件说明

Splitpanes分割面板

属性

|属性名|说明|类型|默认值| |-----|----|-----|----| |horizontal|布局方向|bool|false| |styles|样式|ISplitPaneStyle|{ width: '100%', height: '100%' }|

定义的类型

interface ISplitPaneStyle {
  [name: string]: string | number,
  width: string,
  height: string
}

Pane子面板

属性

|属性名|说明|类型|默认值| |-----|----|-----|----| |styles|样式|IPaneStyle||

定义的类型

interface IPaneStyle {
  [name: string]: string | number
}

Layout布局

属性

|属性名|说明|类型|默认值| |-----|----|-----|----| |asideWidth|侧边栏的宽度|number|220| |headerMaxHeight|头部的最大高度|number|60| |horizontal|布局方向|boolean|false|

插槽

|属性名|说明| |-----|----| |aside|侧边栏| |header|头部|

UpLoadFile单文件上传

属性

|属性名|说明|类型|默认值| |-----|----|-----|----| |size|组件大小|'small' \| 'default' \| 'large'|default| |name|上传按钮名称|string|上传文件| |icon|自@element-plus/icons-vue导入的图标|Component|Upload| |type|选择文件和上传文件的按钮类型|ButtonType|success| |accept|选择文件的类型|string|*|

方法

|方法名|说明|类型|默认值| |-----|----|-----|----| |upload|上传文件方法，返回选中的File|Function|(file: File): void|

暴露变量

|变量名|说明|类型|默认值| |-----|----|-----|----| |Clear|清空选中文件|Function||

UpLoadFiles多文件上传

属性

|属性名|说明|类型|默认值| |-----|----|-----|----| |size|组件大小|'small' \| 'default' \| 'large'|default| |accept|选择文件的类型|string|*|

方法

|方法名|说明|类型|默认值| |-----|----|-----|----| |upload|上传文件方法，返回选中的File|Function|(files: File[]): void|

TableForm表单表格

属性

|属性名|说明|类型|默认值| |-----|----|-----|----| |maxHeight|表格的最大高度|string|550| |size|表格的大小|'large' \| 'default' \| 'small'|default| |tableData|表格的数据|Array<ITableData>|-| |tableColumn|表格的列配置|Array<ITableColumn>|-| |stripe|是否为斑马纹|boolean|true| |border|是否带有纵向边框|boolean|false| |highLight|是否高亮当前行|boolean|false| |headStyle|表头样式|object|{}| |type|是否有索引、展开、多选框|'selection' \| 'index' \| 'expand'|-| |typeLabel|索引、展开时的列名，type == 'index'和type == 'expand'时有效|string|序号| |typeWidth|索引、展开、多选框的宽度|number|60| |typeIsFixed|索引、展开、多选框是否固定在左侧|typeIsFixed|false| |operate|是否有操作列|boolean|false| |operateLabel|操作列列名|string|''| |operateWidth|操作列的宽度|number|''| |operateIsFixed|操作列是否固定在右侧|boolean|false| |search|是否显示搜索按钮|boolean|false| |clear|是否显示清空按钮|boolean|false| |edit|是否显示行内修改按钮|boolean|false| |delete|是否显示行内删除按钮|boolean|false| |operateSize|搜索清楚按钮大小|'large' \| 'default' \| 'small'|default| |rowButtonSize|删除修改按钮大小|'large' \| 'default' \| 'small'|default| |deleteTitle|删除按钮的提示信息|string|是否要删除当前行？| |pagination|是否有分页|boolean|false| |small|分页是否使用小型分页|boolean|false| |total|数据数量|number|0| |hideOnSinglePage|只有一页时是否隐藏|boolean|false| |defaultSelect|默认选中|(val: ITableData) => boolean|-| |defaultSize|分页默认数量|number|5|

表格的列配置属性(ITableColumn)

|属性名|说明|类型|默认值| |-----|----|-----|----| |prop|列绑定的字段，必填|string|-| |label|列的名称，必填|string|-| |width|列宽|number|''| |fixed|是否固定|'left' \| 'right'|false| |hidden|是否隐藏列|boolean|false| |align|对齐方式|'left' \| 'center' \| 'right'|left| |search|是否支持搜索|boolean|false| |disabled|是否禁用搜索框，search=true时有效|boolean|false| |size|搜索框大小，search=true时有效|'large' \| 'default' \| 'small'|default| |searchWidth|搜索框的宽度，search=true时有效|number|92%| |placeholder|自定义搜索提示，多项用&&分割，search=true时有效|string|请输入{label}或请选择{label}| |type|搜索框类型，text=文本框、select=单选/多选框、number=数字框、date=日期框、time=时间框、datetime=日期时间框、daterange=日期范围选择框、timerange=时间范围选择框，datetimerange=日期时间范围选择框、switch=开关按钮，search=true时有效|'text' \| 'select' \| 'number' \| 'date' \| 'datetime' \| 'time' \| 'daterange' \| 'timerange' \| 'datetimerange' \| 'switch'|text| |options|搜索框的下拉列表，search=true&&type='select'时有效|IOptions|-| |multiple|是否支持多选，search=true&&type='select'时有效|boolean|false| |omit|多选时省略，search=true&&type='select'时有效|boolean|false| |closeText|开关关闭文字，search=true&&type='switch'时有效|string|-| |openText|开关打开文字，search=true&&type='switch'时有效|string|-| |max|数字框的最大值，search=true&&type='number'时有效|number|Infinity| |min|数字框的最小值，search=true&&type='number'时有效|number|-Infinity| |step|数字框的跳动步数，search=true&&type='number'时有效|number|1| |costom|自定义内容，支持html|Function|ITableData| |overflow|表格内容溢出|boolean|false|

方法

|方法名|说明|参数| |-----|----|-----| |row-click|行点击事件|(e: 'row-click', item: ITableData): void;| |row-dblclick|行双击事件|(e: 'row-dblclick', item: ITableData): void;| |selection-change|选中行改变事件|(e: 'selection-change', item: ITableData[]): void;| |search|搜索按钮点击、输入框回车事件|(e: 'search', item: ITableData): void;| |clear|清空按钮点击事件|(e: 'clear'): void;| |delete|删除按钮点击事件|(e: 'delete', item: ITableData): void;| |edit|修改按钮点击事件|(e: 'edit', item: ITableData): void;| |page-index|页码变化事件|(e: 'page-index', newValue: number, oldValue: number): void;| |page-size|每页数量变化事件|(e: 'page-size', newValue: number, oldValue: number): void;|

插槽

|插槽名|说明| |-----|----| |header|表格上方的内容| |expand|展开的内容，row参数携带行数据| |operate-front|操作列头的自定义内容，位置在搜索、清空之前| |operate-middle|操作列头的自定义内容，位置在搜索之后、清空之前| |operate|操作列头的自定义内容，位置在搜索、清空之后| |row-operate-front|操作列的自定义内容，位置在修改、删除之前,row参数携带行数据| |row-operate-middle|操作列的自定义内容，位置在修改之后、删除之前，row参数携带行数据| |row-operate|操作列的自定义内容，位置在修改、删除之后，row参数携带行数据|

可导入的类型

export interface ITableColumn {
  /**
   * 列绑定的字段
   */
  prop: string,
  /**
   * 列的名称
   */
  label: string,
  /**
   * 列宽
   */
  width?: number,
  /**
   * 是否固定
   */
  fixed?: 'left' | 'right',
  /**
   * 对齐方式
   */
  align?: 'left' | 'center' | 'right',
  /**
   * 是否支持搜索
   */
  search?: boolean,
  /**
   * 禁用搜索框
   */
  disabled?: boolean,
  /**
   * 搜索框大小
   */
  size?: 'large' | 'default' | 'small',
  /**
   * 搜索框的宽度
   */
  searchWidth?: number,
  /**
   * 自定义搜索提示，多项用&&分割
   */
  placeholder?: string,
  /**
   * 搜索框类型
   */
  type?: 'text' | 'select' | 'number' | 'date' | 'datetime' | 'time' | 'daterange' | 'timerange' | 'datetimerange' | 'switch',
  /**
   * 搜索框的下拉列表，type='select'有效
   */
  options?: IOptions[],
  /**
   * 是否支持多选
   */
  multiple?: boolean,
  /**
   * 多选时省略
   */
  omit?: boolean,
  /**
   * 开关关闭文字
   */
  closeText?: string,
  /**
   * 开关打开文字
   */
  openText?: string,
  /**
   * 数字框的最大值
   */
  max?: number,
  /**
   * 数字框的最小值
   */
  min?: number,
  /**
   * 数字框步长
   */
  step?: number,
  /**
   * 自定义
   */
  costom?: (val: ITableData) => string,
  /**
   * 表格内容溢出
   */
  overflow?: boolean
}
/**
 * 表单格式
 */
export interface ITableData {
  [name: string]: unknown
}
/**
 * 下拉框选项
 */
export interface IOptions {
  /**
   * 显示文本
   */
  label?: string,
  /**
   * 选择的值
   */
  value: string | number,
  /**
   * 是否禁用
   */
  disabled?: boolean
}