基础vue-element 表格 开发头部吸顶,分页浮底
npm install @sbc-fe/ex-table支持 表头吸顶,分页悬浮底部
1. 与 element 使用方法一致。标签使用, options 基本与 element-ui table 一致,如无该属性可添加
2. 分页器悬浮底部,请通过 slot 方式添加。
3. 用法与原来一致
4. 导出按钮前后增加其他功能按钮 请通过 left-btn 为导出左侧添加按钮,right-btn 为导出右侧添加按钮
- data 行数据
- loading: boolean loading 展示
- showSummary: boolean 是否展示总计
- summaryMethod: Function({ columns, data }) 自定义的合计计算方法
- scrollHook: boolean 底部分页器悬浮底部 分页器需要通过 slot='pagination' 放置 ex-table
- fixedHead: boolean 表格标题悬浮顶部 只支持 body 滚动
- openExportBtn: boolean 是否打开导出功能
- exportType: string 导出方式 JAVA 返回 string[] FE 返回 {key: 'titile'} FEEXPORT 前端自动导出
- exportDefaultField: object 增加默认导出项,不会展示在表格头部 格式 {key:'title'}
- exportParams: object 获取导出数据接口参数,参考 axios
- exportOptions: object 导出数据接口,修改接口默认配置
- fileName: 导出文件名
......
/>
组件通过 prop 获取对应字段,如无法配置 prop 可以使用 data-prop,如果未配置则该选项不会展示在导出选项中
>
:filterFunc="
item =>
filter.filterDicText(
item,
dictionary.insuranceType
)
"
>
{{
filter.filterDicText(
scope.row.insuranceType,
dictionary.insuranceType
)
}}
如该列需要通过过滤器展示,请使用function方式,需在值的外层配置dom配置filterFunc, item参数表示行数据,
如有疑问,请参考boss-shebaotong
``
:loading="listLoading"
element-loading-text="Loading"
border
fit
:fixed-head="true"
table-style="width: 100%"
:scroll-hook="true"
>
人事通操作
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
``