@zzwing/vue-fixed-table

    1.1.0 • Public • Published

    vue-table 组件

    CircleCI

    Demo

    功能:

    • 固定表格头、左侧栏
    • 单元格整体居中,局部对齐
    • 虚拟的横向滚动条

    解决问题:

    后台系统的列表页中,如果不做处理 在内容过多情况下.会引起页面滚动.同时会撑开页面. 表头/两侧会滚动条隐藏掉.不利于数据的展示

    解决方法:

    • 全局滚动.(表格过大.页面整体会被撑开)
    • 容器内滚动.(表格显得很狭窄)
    • 垂直方向全局滚动, 水平方向是局部滚动. (请自行使用flex布局使得表格自身横向滚动,纵向自适应页面高度.页面宽度不被撑开, 加虚拟滚动条辅助时候水平滚动不需要拉到最后)
    • 固定表格头/两侧边

    主要依赖

    vue@2.4.4

    Build Setup

    • git clone

    • cd dir,执行

      npm install

      完成依赖包安装

    • 开发环境(访问 http://localhost:8082/demo/)

      npm run dev

    • 生产环境

      npm run build

    Fixed-Table 使用

    固定表头, 左侧以及右侧

    需要通过一定的slot插入相应的内容达到固定

    options

    props 类型 默认 描述
    offsetLeft String, Number 0 左侧偏移
    offsetTop String, Number 0 顶部偏移
    scrollTarget Object, String 滚动容器, 可传dom元素或者选择器, 没有默认为window, 既全局滚动.(DEMO1和2)
    useTrans Boolean false 是否使用动画做回退方案, 在safari和firefox下会有闪动. 所以safari和firefox默认开启.
    selfScroll Boolean false 是否自滚动. 垂直滚动会依赖全局, 横向滚动会依赖自身. 所以需要额外样式是的容器能产生横向的滚动条.(DEMO 3)

    slot

    需要通过slot插入到相应的插槽中, 通过对插槽的控制达到固定效果

    slot 介绍
    leftThead 左侧表头
    thead 中间表头
    rightThead 右侧表头
    leftBody 左侧固定表体
    tbody 表体
    rightBody 右侧固定表体

    align-cell 使用

    options

    props 类型 默认 描述
    dir String 'l' 对齐方向
    tag String 'td' 渲染的标签

    scroll-x-bar 使用

    虚拟的横向滚动条, 需要让容易自行产生横向滚动.

    让容器在页面高度不足的时候, 也可以拖动横向滚动条.

    一定要让容器产生横向滚动

    Install

    npm i @zzwing/vue-fixed-table

    DownloadsWeekly Downloads

    13

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    92.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • zzwing