Dld-vue-ui NPM

组件说明

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`
`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`

表格的列配置属性(ITableColumn)

属性名	说明	类型	默认值
`prop`	列绑定的字段，必填	`string`	`-`
`label`	列的名称，必填	`string`	`-`
`width`	列宽	`number`	`''`
`fixed`	是否固定	`'left' \\| 'right'`	`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`

方法

方法名	说明	参数
`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
}
/**
 * 表单格式
 */
export interface ITableData {
  [name: string]: unknown
}
/**
 * 下拉框选项
 */
export interface IOptions {
  /**
   * 显示文本
   */
  label?: string,
  /**
   * 选择的值
   */
  value: string | number,
  /**
   * 是否禁用
   */
  disabled?: boolean
}

@element-plus/icons-vue vue vue-router

@everything-registry/sub-chunk-1490 @zalastax/nolb-dl

8 months ago

8 months ago

8 months ago

8 months ago

11 months ago