@yidun/el-super-table
v0.0.5
Published
一个基于 Element Plus 的高级表格组件,支持查询表单、表格配置、分页等功能。
Keywords
Readme
ElSuperTable
一个基于 Element Plus 的高级表格组件,支持查询表单、表格配置、分页等功能。
Props
| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | name | String | '' | 表格名称,用于缓存表格设置 | | autoSearch | Boolean | true | 是否启用自动搜索 | | onRequest | Function | - | 表格数据请求方法,必需 | | refreshDeps | Array | [] | 依赖刷新数组 | | formItems | Array | [] | 查询条件配置 | | formLabelWidth | String | '80px' | 查询项标签宽度 | | columns | Array | [] | 表头配置 | | pagination | Object | {} | 分页配置,支持 pageSize、pageNum | | defaultSort | Object | {} | 默认排序配置 | | debounceWait | Number | 300 | 防抖时间(ms) | | splitLine | Boolean | true | 是否显示区域分割线 |
FormItems 配置
查询条件配置项,每个配置项包含以下属性:
| 属性名 | 类型 | 说明 | |--------|------|------| | type | String | 查询项类型,支持:input、select、datePicker、component | | name | String | 查询项对应的字段名称 | | label | String | 查询项标签 | | hideLabel | Boolean | 是否隐藏标签 | | props | Object | 传递给查询项的属性 | | defaultValue | Any | 默认值 | | formatValueText | Function | 格式化查询项值的文本 | | component | Component | 自定义组件 | | span | Number | 查询项宽度系数 | | visible | Boolean | 是否可见 |
Columns 配置
表格列配置,每个配置项包含以下属性:
| 属性名 | 类型 | 说明 | |--------|------|------| | key | String | 列的唯一标识 | | title | String | 列标题 | | type | String/Function | 列类型,支持:text、link、tag、button、component | | titleTooltip | String/Function | 标题提示信息 | | content | String/Function | 表格内容 | | tooltip | String/Boolean/Function | 内容提示信息 | | component | Component | 自定义组件 | | props | Object/Function | 组件属性 | | copyable | Boolean | 是否可复制 | | ellipsis | Boolean | 是否显示省略号 | | width | String/Number | 列宽度 | | minWidth | String/Number | 最小宽度 | | fixed | Boolean/String | 是否固定列 | | sortable | Boolean/String | 是否可排序 | | resizable | Boolean | 是否可调整宽度 | | align | String | 对齐方式 | | headerAlign | String | 表头对齐方式 |
Events
| 事件名 | 参数 | 说明 | |--------|------|------| | form-item-change | (name: string, value: any) | 表单项值变化时触发 |
Methods
| 方法名 | 参数 | 返回值 | 说明 | |--------|------|--------|------| | getFormValues | - | Object | 获取所有查询条件值 | | getRquestsParams | - | Object | 获取完整的请求参数 | | onSearch | (page?: number) | - | 执行搜索 | | getFormItemWidth | (item: Object) | String | 获取查询项宽度 | | openAdvancedSearchDialog | - | - | 打开高级搜索对话框 | | onAdvancedSearchChange | (filterList: Array) | - | 高级搜索条件变化 | | formatTagText | (filterItem: Object) | String | 格式化标签文本 | | onRemoveFilter | (filterItem: Object) | - | 移除筛选条件 | | onAutoSearch | - | - | 自动搜索 | | getComponentProps | (column: Object, scope: Object) | Object | 获取组件属性 | | getFormItemProps | (formItem: Object) | Object | 获取表单项属性 | | setFormValue | (name: string, value: any) | - | 设置单个查询项的值 | | setFormValues | (values: Object) | - | 批量设置查询项的值 |
