npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sbc-fe/ex-table

v2.0.12

Published

基础vue-element 表格 开发头部吸顶,分页浮底

Downloads

22

Readme

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>