@sbc-fe/ex-table v2.0.12

element-ui table 组件封装

支持 表头吸顶，分页悬浮底部

使用方法

1. 与 element 使用方法一致。标签使用<ex-table ...options></ex-table>, options 基本与 element-ui table 一致，如无该属性可添加
2. 分页器悬浮底部，请通过 slot 方式添加。 <ex-table><template slot="pagination"><pagination /></template></ex-table>
3. <el-table-column> 用法与原来一致
4. 导出按钮前后增加其他功能按钮 请通过 <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>