Skip to content

STable

思路:把一个表格页面所有重复的功能 (表格多选、查询、重置、刷新、分页、数据操作二次确认、文件下载、文件上传) 都封装成 Hooks 函数钩子或组件,然后在 STable 组件中使用这些函数钩子或组件。在页面中使用的时,只需传给 STable 当前表格数据的请求 API、表格配置项 columns 就行了,数据传输都使用 作用域插槽 或 tsx 语法从 STable 传递给父组件就能在页面上获取到了。

STable 属性

属性名类型是否必传默认值描述
columnsColumnProps[]组件会根据此字段渲染搜索表单与表格列(支持动态更新)
dataArray[]静态 tableData 数据(支持分页),若存在则不会使用 requestApi 返回的 data
requestApi ?Function[]获取表格数据的请求 API
requestAuto ?
requestError ?
dataCallback ?
paginationBooleantrue是否显示分页组件
initParam ?Object{}表格请求的初始化参数,该值变化会重新请求表格数据
toolButtonBoolean / Arraytrue是否显示表格功能按钮,支持(["refresh" / "setting" /"search"])
rowKey ?String'id'当表格数据多选时,所指定的 id
searchCol ?Number /Objectxs: 1, sm: 2, md: 2, lg: 3, xl: 4表格搜索项每列占比配置

Column 配置(ColumnProps)

使用 v-bind="column" 通过属性透传将每一项 column 属性全部透传到 el-table-column 上,所以支持 el-table-column 的所有 Props 属性。在此基础上,还扩展了以下 Props (均为非必传项):

属性名类型默认值描述
name---

检索栏 配置 (SearchProps)

属性名类型是否必传默认值描述
name----

STable 事件

事件名描述回调参数
name--

STable 方法

方法名描述
name-

STable 插槽

插槽名描述
name-