# @zzwing/vue-fixed-table

> a vue-table component

Latest version **1.1.0** (published 2018-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zzwing/vue-fixed-table
pnpm add @zzwing/vue-fixed-table
yarn add @zzwing/vue-fixed-table
bun add @zzwing/vue-fixed-table
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-10-12 |
| First published | 2018-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 90.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | zhengzwing@gmail.com |
| Maintainers | zzwing |
| Keywords | vue, table, fixed-table, component |

## Links

- npm: https://www.npmjs.com/package/@zzwing/vue-fixed-table
- Repository: https://github.com/zWingz/vue-fixed-table
- Homepage: https://github.com/zWingz/vue-fixed-table#readme
- Issues: https://github.com/zWingz/vue-fixed-table/issues
- npm.io page: https://npm.io/package/@zzwing/vue-fixed-table

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2018-10-12
- 1.0.4 — 2018-10-10
- 1.0.3 — 2018-09-16
- 1.0.2 — 2018-09-16
- 1.0.1 — 2018-09-16
- 1.0.0 — 2018-09-15

## README

# vue-table 组件

[![CircleCI](https://circleci.com/gh/zWingz/vue-fixed-table.svg?style=svg)](https://circleci.com/gh/zWingz/vue-fixed-table)

[Demo](https://zwing.site/vue-fixed-table/docs/)

功能：
+ 固定表格头、左侧栏
+ 单元格整体居中，局部对齐
+ 虚拟的横向滚动条

解决问题:

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

解决方法:
+ 全局滚动.(表格过大.页面整体会被撑开)
+ 容器内滚动.(表格显得很狭窄)
+ 垂直方向全局滚动, 水平方向是局部滚动. (请自行使用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 使用

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

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

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

---
_Source: https://npm.io/package/@zzwing/vue-fixed-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._