@sbc-fe/ex-table
v2.0.12
Published
基础vue-element 表格 开发头部吸顶,分页浮底
Downloads
22
Readme
element-ui table 组件封装
支持 表头吸顶,分页悬浮底部
使用方法
- 与 element 使用方法一致。标签使用
<ex-table ...options></ex-table>
,options
基本与 element-ui table 一致,如无该属性可添加 - 分页器悬浮底部,请通过 slot 方式添加。
<ex-table><template slot="pagination"><pagination /></template></ex-table>
<el-table-column>
用法与原来一致- 导出按钮前后增加其他功能按钮 请通过
<ex-table><template slot="left-btn"></template></ex-table>
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: 导出文件名
导出获取表格标题配置
<el-table-column prop="memberCode" ...... /> 组件通过 prop 获取对应字段,如无法配置 prop 可以使用 data-prop,如果未配置则该选项不会展示在导出选项中
<el-table-column prop="insuranceType"
<template slot-scope="scope">
<div
:filterFunc="
item =>
filter.filterDicText(
item,
dictionary.insuranceType
)
"
>
{{
filter.filterDicText(
scope.row.insuranceType,
dictionary.insuranceType
)
}}
</div>
</template>
例子
<ex-table
:data="list"
:loading="listLoading"
element-loading-text="Loading"
border
fit
:fixed-head="true"
table-style="width: 100%"
:scroll-hook="true"
>
<el-table-column align="center" prop="memberName" label="企业名称" width="220" show-overflow-tooltip/>
<el-table-column align="center" label="操作" fixed="right" width="250">
<template slot-scope="scope">
<div class="td-actions">
<el-link type="primary" @click="handleProxy(scope.row.memberId)">
<svg-icon icon-class="proxy"/>
人事通操作
</el-link>
<el-link type="primary" @click="handleDialog(scope.row.memberId)">外包合同是否可见</el-link>
</div>
</template>
</el-table-column>
<template slot="pagination">
<Pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</template>
</ex-table>